JS输出到div标签出现后立即消失

Question

我正在制作一个基本的计算器，我希望用户计算的每个结果都显示在 div 历史记录中。问题是，无论何时完成计算，结果都会在历史记录下方出现几分之一秒，然后消失。我使用的功能如下：

function sum() {
        getNumbers();
        var sum = input1 + input2;
        alert(sum);
        document.getElementById("History").innerHTML += sum;
}

如果需要，还有我的完整 html/js 代码：

   var input1, input2

function getNumbers() {
input1 = Number(document.getElementById("imp1").value);
input2 = Number(document.getElementById("imp2").value);
}

function sum() {
 getNumbers();
 var sum = input1 + input2;
 alert(sum);
 document.getElementById("History").innerHTML += "<br>" + sum;
}

function diff() {
 getNumbers();
 var diff = input1 - input2;
  alert(diff);
  document.getElementById("History").innerHTML += "<br>" +  diff;
}

function prod() {
 getNumbers();
 var prod = input1 * input2;
 alert(prod);
 document.getElementById("History").innerHTML += "<br>" +  prod;
}

function quot() {
 getNumbers();
 var quot = input1 / input2;
 alert(quot);
 document.getElementById("History").innerHTML += "<br>" +  quot;
}

 

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Calculator</title>
    <link rel ="stylesheet" href="calculator.css" />
    <script src ="calculator.js"></script>
    
    
    <div id="calc">
     <form name="calc_input">
     <input type="text" id="imp1" />
     <input type="text" id="imp2" />
     <!-- buttons -->
     <button onclick="sum()" id="add" value="sum">Add</button>
     <button onclick="diff()" id="subtract" value="diff">Subtract</button>
     <button onclick="prod()" id="multiply" value="prod">Multiply</button>
     <button onclick="quot()" id="divide" value="quot">Divide</button>
    
     </form>
    </div>
    
    <div id="History">
    <p>
    History:
    
    </p>
    </div>
    </head>
    </html>

Answer 1

这可能与默认具有提交行为的按钮有关。可能当您单击它时，它正在提交您的表单并重新加载页面。尝试向每个按钮添加 type="button"。

JS输出到div标签出现后立即消失

JS output to div tag disappears immediately after appearing

html

javascript

calculator