引用childNodes（Javascript）

本例中的遊戲擁有可變數量的玩家。每個球員都需要跟蹤比分。該示例設法創建所需的HTML，但我不確定如何引用每個孩子。這裏的HTML：引用childNodes（Javascript）

var players=prompt("Number of players?",2); 
 

 
oldNode = document.getElementById("scoreHolder"); 
 

 
for (x=1;x<players;x++) { 
 
    newNode = oldNode.cloneNode(true); 
 
    document.documentElement.appendChild(newNode); \t 
 
} 
 

 
var c=document.getElementById("scoreHolder").childNodes; 
 
c[1].style.backgroundColor = "yellow"; 
 
c[2].style.backgroundColor = "blue";

<div id="scoreHolder">Player 1 score: <span id="score">0<span></div>

這個例子變成HTML黃色的第一線的一部分，但不執行任何操作與其他線路。我如何引用它們以便我可以更新每個玩家的分數？

來源

2015-05-04 Mike Risher

我想問一個問題：你知道從哪個索引開始數組？ – xAqweRx

@xAqweRx播放器＃1已經在DOM中，因此可以跳過。 – JJJ

我想告訴你，在JS中的數組開始從0索引，而不是從1索引。 – xAqweRx

-1

這樣做的for循環：

for(var i = 0; i < c.length; i++){ 
    if(i%2 == 1) 
     node[i].style.backgroundColor = "yellow"; 
    else  
     node[i].style.backgroundColor = "blue"; 
}

更新我已經和索引的錯誤。嘗試更新一個

更新2

您有功能document.getElementById("scoreHolder")一個問題 - 它只返回一個元素，因此要儘量添加類#scoreHolder和document.getElementsByClassName和追加刪除ID元素

來源

2015-05-04 08:53:49 xAqweRx

我試過你的代碼，但沒有顯示藍色。儘管謝謝你的努力！ –

我寫了一個錯誤。嘗試新的。 – xAqweRx

這不起作用，因爲'getElementById（）'只能檢索一個元素，而不是數組。 – JJJ

<body> 
    <!-- add name attribute --> 
    <div id="scoreHolder" name="scoreHolder">Player 1 score: <span id="score">0<span></div> 
</body> 
<script type="text/javascript"> 
    var players=prompt("Number of players?", 2); 

     oldNode = document.getElementById("scoreHolder"); 

     for (var x=1;x<players;x++) { 
      newNode = oldNode.cloneNode(true); 
      newNode.id="newId"+x; // reassign the new id 
      document.documentElement.appendChild(newNode);  
     } 

     // use getElementsByName 
     var c=document.getElementsByName("scoreHolder"); 
     c[0].style.backgroundColor = "yellow"; 
     c[1].style.backgroundColor = "blue"; 
</script>

來源

2015-05-04 09:02:56

謝謝。我終於看到藍色顯示。我會記得下次使用getelementsByName。我還注意到你在添加新ID時做的巧妙事情。 –

引用childNodes（Javascript）

回答

相關問題