無法讀取屬性'substring'爲空

Question

我無法解決我的代碼問題。我試圖運行code，但它給了我一個錯誤。看來我的代碼不知道什麼是contentDivs

for (a = 0; a < links.length; a++) { 
    // number of links should match number of content 
    links[a].style.backgroundColor = 'magenta'; 
    contentDivs[a].style.display = 'none'; 
} 

其中 VAR contentDivs = document.getElementsByClassName（ '內容'）; 和我試圖做console.log(contentDivs.innerHTML);和console.log(contentDivs.textContent);但它出來未定義。

我在想什麼？

無法讀取下面

代碼無效的特性 '子'：

var links = document.getElementsByClassName('link'), // add a class to the links and get them all 
 
    contentDivs = document.getElementsByClassName('content'); // same with the content blocks 
 

 
for (i = 0; i < links.length; i++) { // loop through the links to add the event listeners 
 
    var link = links[i]; 
 

 
    // add event listener 
 
    link.addEventListener('click', function(event) { 
 

 
    // reset color and hide content: 
 
    for (a = 0; a < links.length; a++) { 
 
     // number of links should match number of content 
 
     links[a].style.backgroundColor = 'magenta'; 
 
     contentDivs[a].style.display = 'none'; 
 
    } 
 

 
    // set colour of clicked 
 
    event.target.style.backgroundColor = 'grey'; 
 

 
    // show clicked content 
 
    document.getElementById(event.target.getAttribute("href").substring(1)).style.display = 'block'; 
 
    }) 
 
}

ul { 
 
    wudth: 100%; 
 
    clear: both 
 
} 
 

 
li { 
 
    padding: 10px; 
 
    color: white; 
 
    list-style: none; 
 
} 
 

 
li a { 
 
    background: magenta; 
 
    color: white; 
 
    padding: 10px; 
 
} 
 

 

 
/* add this so only home is showing when page loads */ 
 

 
.content:not(:first-child) { 
 
    display: none; 
 
}

<ul> 
 
    <li><a href="#home" class="link">Home</a></li> 
 
    <li><a href="#contact" class="link">Contact</a></li> 
 
    <li><a href="#articles" class="link">Articles</a></li> 
 
    <li><a href="#connect" class="link">Connect</a></li> 
 
</ul> 
 

 
<div> 
 
    <div id="home" class="content"> 
 
    home 
 
    <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque erat velit, placerat sit amet nisl sed, aliquet bibendum nunc. Donec varius dui sed velit volutpat, et rutrum turpis fini 
 
    </div> 
 
    <br> 
 
    <div id="contact" class="content"> 
 
    contact 
 
    <br> . Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum aliquam iaculis turpis et efficitur. Integer sollicitudin tincidunt imperdiet. Nam pharetra orci ac viverra dapibus. Ut feugiat nisi sit 
 
    amet hendrerit scelerisque. Nulla scelerisque mauris metus, eu facilisis lectus euismod vel. Pellentesque magna mi, scelerisque vel rutrum quis, volutpat et diam. 
 
    </div> 
 
    <div id="articles" class="content"> 
 
    articles 
 
    <br> . Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum aliquam iaculis turpis et efficitur. Integer sollicitudin tincidunt imperdiet. Nam pharetra orci ac viverra dapibus. Ut feugiat nisi sit 
 
    amet hendrerit scelerisque. Nulla scelerisque mauris metus, eu facilisis lectus euismod vel. Pellentesque magna mi, scelerisque vel rutrum quis, volutpat et diam. 
 
    </div> 
 
    <div id="connect" class="content"> 
 
    connect 
 
    <br> . Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum aliquam iaculis turpis et efficitur. Integer sollicitudin tincidunt imperdiet. Nam pharetra orci ac viverra dapibus. Ut feugiat nisi sit 
 
    amet hendrerit scelerisque. Nulla scelerisque mauris metus, eu facilisis lectus euismod vel. Pellentesque magna mi, scelerisque vel rutrum quis, volutpat et diam. 
 
    </div> 
 
</div>

Answer 1

document.getElementsByClassName('content');返回數組。

返回所有子元素的類數組對象，其中包含所有給定類名稱的所有子元素。在文檔對象上調用時，將搜索包括根節點在內的完整文檔 。你也可以在任何元素上調用getElementsByClassName（）;它將僅返回 元素，這些元素是給定類名稱的指定根元素的後代和 。

你在這裏做console.log(contentDivs.innerHTML);是acessing陣列的innerHTML財產有數組中沒有此屬性，因此返回undefined。

你要做的console.log(contentDivs[0].innerHTML);