使用JavaScript添加到内部html的元素是否不持久？

我试图用一个重复多次的字符填充一个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>   

函数populateTarget（）
{
var target=document.getElementById（“div_target”）；
var nrsteeps=parseInt（document.getElementById（“nr”）.value）；
例如（var i=0；i当您触发运行
populateTarget
函数的事件时，您是否可能重新加载页面？它的形式是否具有诸如“.”之类的操作，例如由按钮触发

这可以解释你看到的行为

如果函数以
return false；
结束，如果我的猜测是正确的，它可能会阻止这种情况。
document.getElementById（“nr”）

和What calls

populateTarget（）；

？您是否使用控制台检查了nrSteps？可能有很多原因导致它为NaN，例如它不是输入，或者需要修剪…类似于

target.innerHTML+=（“x”）

是一个真正的Javascript灾难。我知道你是一个Javascript新手，所以我的建议是尽快理解为什么这个代码段很糟糕。在

populateTarget（）之后是否有其他Javascript代码覆盖
div\u target
的内部HTML调用了

？一个普遍的建议是首先生成htmlText，然后附加到

target.innerHtml

，而不是为每个字符更新它。我添加了一个

返回false

，虽然它不起作用，但我认为你重新加载页面的想法是有价值的，所以我添加了表单。这是一个诊断问题的想法lem，而不是解决方案。您可以发布JSFIDLE、JSBin或Codepen演示吗？将onclick更改为

onclick=“populateTarget（）；返回false；”

我认为这会解决您的问题。您怀疑是在重新加载页面。问题确实是，当我按下按钮时，表单正在重新发布，我将按钮从表单中取出，从而解决了问题。我将摆弄该功能，使其更优雅。

             <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>