어떻게 같은 ID로 여러 된 div를 편집 할 수 document.getElementById를 ("mydiv")를 사용합니까

Question

나는 ID = "포스트"하지만 때 여러 된 div가 페이지에서

<script> 
function myFunction() 
{ 
document.getElementById("post").style.backgroundColor="#ECF6A4"; 
} 
</script> 
<button onclick="myFunction()">Change Post Color</button> 

입니다 무엇을 가지고 나는 코드를 저장하고 그것을 시험해 봄으로써 페이지의 첫 번째 div의 배경을 id = "post"가 아닌 다른 것으로 바꾼다.

나는 행운과 함께 getElementsById를 시도했다. 내가 생각할 수있는 것이 전부다.

간단한 수정 사항이 있습니까?

Answer 1

당신은 ID 대신 클래스를 사용해야합니다 이상 때문에

getElementsByClassName() 

는 반복.

document.getElementsByClassName('class').style.backgroundColor = "#ECF6A4" 

Answer 2

동일한 페이지의 동일한 ID를 가진 여러 div가 잘못된 태그입니다. 중복 ID는 유효하지 않습니다.

그래서 클래스 PLS 를 사용하여 여러 요소를 참조 할 때 그들이

Answer 3

내가 이미 finished my demo

당신이 쓴 이후 : trying getElementsByClassName() but nothing changes 그 이유는 getElementsByClassName() 배열을 반환하고 당신이 .style.backgroundColor="#ECF6A4";

function myFunction() 
{ 
    var listItems = document.getElementsByClassName("even"); 
    for (var i = 0; i < listItems.length; i++) 
    { 
     listItems[i].style.backgroundColor="#ECF6A4"; // element i of array 
    } 
} 

를 사용하기 전에이 배열의 각 요소에 액세스해야

그리고 html

<ul> 
    <li class="odd">1</li> 
    <li class="even">2</li> 
    <li class="odd">3</li> 
    <li class="even">4</li> 
    <li class="odd">5</li> 
    <li class="even">6</li>  
</ul> 
<button onclick="myFunction()">Change Color for even</button>