Изменить innerHTML ребенка div

Question

Я новичок в JavaScript. То, что я пытаюсь сделать, это сделать div, и внутри него будет еще один div. В моем сценарии кода я пытаюсь создать новые экземпляры этого div, используя заводскую функцию, если это правильное имя для него, а затем измените innerHTML дочернего div, если это возможно. Заранее спасибо.

<div class = "loopBlock" style="width:350px;"> 
    <fieldset> 
     <legend style="color:black;font-weight:bold;">While Loop</legend> 
     <table> 
      <tr> 
      <td>Condition:</td> 
      <td><input type="text" /></td> 
      </tr> 
     </table> 

     <div class = "codeDivClass" id = "codeDiv"> 
      HelloWorld! 
     </div> 
    </fieldset> 
</div> 


<script> 
    var loopDiv = document.getElementsByClassName("loopBlock"); 
    var loopi =1; 

    function loopObject(){ 
     var loopDivObject = document.createElement("div"); 
     loopDivObject.innerHTML = loopDiv[0].innerHTML; 
     loopDivObject.className = "loopBlock"; 
     loopDivObject.id = "loopBlock"+loopi; 
     loopi++;  
     return loopDivObject; 
    }; 

    var functionCodeDiv = document.getElementById("codeDiv"); 

    for (i=0; i<5; i++){ 
     var tempLoop = loopObject(); 
     functionCodeDiv.appendChild(tempLoop); 
     var id = "loopBlock"+i+1; 
     document.getElementById(id).getElementsByTagName('div')[0].innerHTML = "bye"; 
    } 

</script> 

Answer 1

На самом деле не получилось, как это должно работать, но я уверен, что нашел ошибку.

var id = "loopBlock"+i+1; 

вы должны заменить:

var id = "loopBlock"+(i+1); 

примера я равен 2.

В первом случае вы получите: "loopBlock21"

В второй (мой) случае, вы получите «loopBlock3»

Answer 2

Проблема в operator precedence. Так как в этой строке

var id = "loopBlock" + i + 1; 

у вас есть два + (unary plus) операторов с одинаковым приоритетом, они будут действовать как конкатенации строк операторов, поскольку один из операндов является строка («loopBlock»).

В вашем случае вы хотите группировать i + 1 с круглыми скобками, чтобы сначала выражение оценивалось как оператор сложения арифметических операций. После того, что конкатенация с "loopBlock" произведет ожидаемый результат:

var id = "loopBlock" + (i + 1); 

Демо:http://jsfiddle.net/0091n9tt/

Answer 3

Я думаю, что вы проблемы в это строка:

document.getElementById(id).getElementsByTagName('div')[0].innerHTML = "bye"; 

То, что вы фактически делаете пытается gett divs внутри вновь созданного div (loopBlock), который пуст.

У вас уже есть ссылка на блок, который вы хотите изменить innerHTML; вы можете просто использовать его как это:

tempLoop.innerHTML = "bye"; 

Так вы для цикла будет выглядеть следующим образом:

for (i=0; i<5; i++){ 
    var tempLoop = loopObject(); 
    functionCodeDiv.appendChild(tempLoop); 
    tempLoop.innerHTML = "bye"; 
} 

Обратите внимание, что вам не нужно ид больше.