同じクラスの単語をまとめてリストしたリスト

Question

私のウェブページの1つに、語彙が緑色で強調表示された読み上げテキストがあります(<span class="highlighted">)。私は、これらの語彙のすべてを取り、テキストの下に順序付けられたリストに入れるスクリプトを作成しようとしています。私が書いたコードはほぼ正確に私が望むものですが、各リスト項目の最初の文字のみを表示します。これまで私が持っていたものは次のとおりです。

<ol id="vocabulary"> 
</ol> 

<script> 
//Get number of vocabulary terms 
var list = document.getElementsByClassName('highlighted').length; 
var listed = ""; 

//Pull each word out 
for (var i =0; i < list; i++) { 
    var vocab = document.getElementsByClassName('highlighted')[i].innerHTML 
    //Create a new list item for each word 
    listed += "<li>" + vocab[i]+ "</li>"; 
} 

document.getElementById("vocabulary").innerHTML = listed; 

</script> 

どのようにすればいいですか？ありがとうございました！

Answer 1

ここでinnerHTMLのi要素にアクセスしているので、vocab[i]です。これを試みてください。

<ol id="vocabulary"> 
 
</ol> 
 

 
<p class="highlighted">AAA</p> 
 
<p class="highlighted">BBB</p> 
 
<p class="highlighted">CCC</p> 
 

 
<script> 
 

 
var list = document.getElementsByClassName('highlighted'); 
 
var listed = ""; 
 

 
for (var i =0; i < list.length; i++) { 
 
    listed += "<li>" + list[i].innerHTML + "</li>"; 
 
} 
 

 
document.getElementById("vocabulary").innerHTML = listed; 
 

 
</script>