Question

我对JS很新，我已经创建了一个公式来做一些计算，并在完成后将它们放入div中。我的问题是在第一个按钮按下它就像一个魅力。当我第二次按下按钮时，它会删除我div中的文本并且不会重做计算。

它可能是一些我无法找到的愚蠢错误但是我很欣赏任何帮助。守则如下：

    function formChanged() {
      var x = document.getElementById("x").value;
      var y = document.getElementById("y").value;
    }

    document.getElementById('button').click = function calc() {

      var x = parseFloat(document.getElementById("x").value);
      var y = parseFloat(document.getElementById("y").value);

      document.getElementById("test").innerHTML = "pre-text";

      while (y < x) {
  	    document.getElementById("test").innerHTML += "text" + x + "more text";;
        y++;
      }

      document.getElementById("test").innerHTML = "post-text";

    }

 <form>
      <input value="20" id="x" type="text" onkeyup="formChanged()" onchange="formChanged()">
      <input value="1" id="y" type="text" onkeyup="formChanged()" onchange="formChanged()">
      <button type="button" id="button">Calc</button>
    </form>

    <div id="test" style="height:400px; width:500px; overflow-y: scroll;"></div>

我试图将它缩小一点，因为它有一个更大的计算循环等。函数本身工作正常。

Answer 1

document.getElementById("test").innerHTML = "post-text";

此部分删除了您的div内容，只需将其更改为：

document.getElementById("test").innerHTML += "post-text";

计算器

完整的工作代码：

<div id="test" style="height:400px; width:500px; overflow-y: scroll;"></div>

<script>

function calc() {
    var x = parseFloat(document.getElementById("x").value);
    var y = parseFloat(document.getElementById("y").value);

    document.getElementById("test").innerHTML = "pre-text";

    while (y < x) {
        document.getElementById("test").innerHTML += "text" + x + "more text";;
        y++;
    }

    document.getElementById("test").innerHTML += "post-text";

}
</script>

当然，您可以使用element.addEventListener("click", calc)，例如 SimpleJ 。

document.getElementById('button').addEventListener("click", calc);

Answer 2

我将您的代码复制到一个文件中并尝试了。你的按钮没有做任何事情。

编辑：正如@SimpleJ所说，全球通话是一种不好的做法。我更新了答案。

function calc(){
    // function body
}

document.getElementById('button').addEventListener("click", calc);

这样，单击按钮时实际调用calc()函数。如果您需要Google的某些字词以供进一步参考，则称其为添加EventListener 。

我希望这就是你所需要的。

Javascript - 第二个按钮单击清除我的div

2 个答案: