0

此示例中的游戏具有可变数量的玩家。需要为每个玩家跟踪一个分数。该示例设法创建了所需的 HTML，但我不确定如何引用每个孩子。这是HTML：

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

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 的第一行的一部分变为黄色，但对其他行不做任何处理。我如何参考它们以便更新每个玩家的分数？

4

2 回答 2

0 
<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-04T09:02:56.513 回答
-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-04T08:53:49.493 回答