无法读取属性'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);