nullのプロパティ 'substring'を読み取れません

Question

私のコードで問題を解決することができません。 codeを実行しようとしていますが、エラーが発生します。私のコードは するvar contentDivs = document.getElementsByClassName（ 'コンテンツ'）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'; 
} 

が何であるかを知らないようです。 と私は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（）を呼び出すこともできます。指定されたルート要素の子孫である 要素のみが返され、与えられたクラス名は です。配列には、このような性質は、このようにundefinedを返していないそこにあるもの、あなたがconsole.log(contentDivs.innerHTML);は、アレイのinnerHTMLプロパティをアクセスしてるされ、ここでやっている

。

は、あなたが問題のコードは問題とは全く無関係であるconsole.log(contentDivs[0].innerHTML);