getElementByIdの代替 - 複数の要素に影響する方法

Question

私は段落内のすべての単語を強調表示し、クリックすると赤くしています。今私は1つの単語のために働いたが、他の人はフォローされません。 https://jsfiddle.net/q1z7Lnv0/

<p><span id="word" class="notclicked">test</span> <span id="word" class="notclicked">test</span></p> 

Javascriptを：

var word = document.getElementById("word"); 
    word.onclick = function() { 
     if(word.className == "clicked"){ 
      word.className = 'notclicked'; 
     } 
     if(word.className == "onmouse"){ 
      word.className = 'clicked'; 
     } 
    } 
    word.onmouseover = function onMouse(){ 
     if(word.className != "clicked"){ 
     word.className = 'onmouse'; 
     } 
    } 
    word.onmouseout = function onMouse(){ 
     if(word.className != "clicked"){ 
     word.className = 'notclicked'; 
     } 
    } 

は、私はこの問題は、同じ名前を持つ1つのIDがあり得ることを知っています。しかし、私は他に何が使えるかわからない。

助けてください！

Answer 1

この使用する：あなたはクラス名「言葉」を持っているすべての要素を取得します、あなたがにイベントをバインドすることができますこの方法

<span class='word'>text</span> 

：

document.getElementsByClassName('word'); 

し、HTML内に要素の代わりにクラス

あなたが目標と言葉を得るためにあなたのコードを変更し、唯一のクラスの単語 '例えば

持つすべての単語の代わりに、1つの単語からあなたのクリックのクラスを追加および/または削除する必要があります

：

word.onclick = function(e) { 
    if(e.target.className == "clicked"){ 
      e.target.className = 'notclicked'; 
    }if(e.target.className == "onmouse"){ 
     e.target.className = 'clicked'; 
    } 
} 

私は、イベントインターフェイスを使用してターゲットのクラス名を変更できるとは確信していません。この例は、コードをコピーして貼り付けるのではなく、擬似コードとしてください。

関数にパラメータとして指定した "e"に慣れていない場合は、すべてのJavaScriptイベントのイベントインターフェイスです。それは常にイベント関数に渡され、それを使用してイベントに関する必要な情報をすべて取得できます。

Answer 2

代わりのエイリアスとしてidの代わりにclassを使用できます。

Answer 3

これを行う方法は複数あります。 1つのアプローチは、アクセスする要素にidの代わりにクラスを追加することです。その後、getElementsByClassNameを使ってそれらを得ることができます。ここで

は実施例である： https://jsfiddle.net/q1z7Lnv0/1/