getElementById - 복수 요소에 영향을주는 방법

Question

단락의 모든 단어를 강조 표시하고 클릭하면 빨간색으로 유지하려고합니다. 이제는 한 단어로 효과를 얻었지만 다른 단어는 따르지 않습니다. https://jsfiddle.net/q1z7Lnv0/

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

자바 스크립트 :

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'; 
     } 
    } 

나는 문제는 같은 이름을 가진 하나 개의 ID가있을 수 있다는 것을 알고있다. 그러나 나는 내가 사용할 수있는 다른 대안이 무엇인지 모른다.

도와주세요!

Answer 1

사용이 :

document.getElementsByClassName('word'); 

그리고 당신의 HTML에서

:

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

당신은 클래스 이름 "단어를"이 모든 요소를 ​​얻을 것이다 당신이에 이벤트를 바인딩 할 수 있습니다이 방법 요소 대신 클래스.

당신은 목표 단어를 얻을 수 있도록 코드를 수정 만 클래스 '단어'예를 들어

모든 단어 대신 그 하나 개의 단어에서 클릭 클래스를 추가 및/또는 제거해야합니다

:

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

Event 인터페이스를 사용하여 대상의 클래스 이름을 수정할 수 있다는 것을 100 % 확신하지 못하므로 가능한 코드를 복사하여 붙여 넣기보다는 의사 코드로 사용하십시오.

함수에 매개 변수로 넣은 "e"에 익숙하지 않은 경우 모든 자바 스크립트 이벤트에 대한 이벤트 인터페이스입니다. 그것은 항상 이벤트 함수로 전달되며,이를 사용하여 이벤트에 대한 모든 필요한 정보를 얻을 수 있습니다.

Answer 2

대체 별칭으로 id 대신 class를 사용할 수 있습니다.

Answer 3

이렇게하는 방법은 여러 가지가 있습니다. 한 가지 방법은 액세스하려는 요소에 id 대신 클래스를 추가하는 것입니다. 그런 다음 getElementsByClassName을 사용하여 가져올 수 있습니다. https://jsfiddle.net/q1z7Lnv0/1/