Элементы, добавленные во внутренний html с JavaScript, не сохраняются?

Question

Я пытаюсь заполнить DIV с определенным характером, который повторяющиеся несколько раз, довольно основная задачей, или так я думал, для которого я написал следующий метод JS:

<script> 
      function populateTarget() 
       { 
        var target = document.getElementById("div_target"); 
        var nrSteps = parseInt(document.getElementById("nr").value); 

        for (var i=0;i<nrSteps;i++) 
         { 
          target.innerHTML+=("x"); 
         } 
       } 
</script> 

Проблема что «x» появляется, но только на долю секунды, которую я могу заметить только при включенном Firebug.

функция вызывается из кнопки в таком виде:

   <form> 
        Nr de caractere: <input type="text" value="1" id="nr"/> 
        <br/> 
        Caracterul dorit: 
        <select id="chr"> 
         <option value="c">c</option> 
         <option value="b">b</option> 
         <option value="g">g</option> 
         <option value="o">o</option> 
        </select> 
        <br/> 
        <button onclick="populateTarget()"> Genereaza</button> 
       </form> 

Это ДИВ:

<style > 
    body 
    { 
     color: white; 
     background-color: blue; 
    } 

    #div_target,#div_form 
    { 
     height: 300px; 
     width: 300px; 
     border:5px solid white; 
    } 

    #div_target 
    { 
     float: left; 
     overflow: scroll; 
    } 
</style> 

<div id="div_target"> 
</div>  

Никакие другие функции связывайтесь с внутренней HTML в DIV после этого, и в то время как Я знаю, что добавление непосредственно к innerHTML - очень неэлегантный метод, я просто хотел проверить, что я мог бы добавить символ, прежде чем писать что-то более продвинутое.

A codepen моего кода.

Есть ли у кого-нибудь идея о том, что я делаю неправильно, и, возможно, решение, в котором я использую только чистые JS, нет библиотек?

Answer 1

Возможно, вы перезагрузите страницу, когда запускаете функцию populateTarget? Это в форме с таким действием, как «.», Например, с помощью кнопки?

Это объясняет поведение, которое вы видите.

Если функция завершена return false;, это может помешать этому, если моя догадка правильная.