Ссылаясь на 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 Player # 1 уже находится в DOM, поэтому его можно пропустить. – JJJ

Я хотел сказать вам, что массив в JS начинается с индекса 0, а не из 1 индекса. – xAqweRx

-1

для этого использовать цикл:

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

Update Я сделал ошибку с индексами. попробуйте обновляется один

UPDATE 2

У вас есть проблемы с функцией document.getElementById("scoreHolder") - возвращает один элемент, поэтому попробуйте добавить класс #scoreHolder и document.getElementsByClassName и удалить идентификатор из прилагается элементы

источник

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 в следующий раз. Я также замечаю умную вещь, которую вы сделали с добавлением новых идентификаторов. –

Ссылаясь на childNodes (Javascript)

ответ

Смежные вопросы