文本显示并在 JavaScript 中再次消失答案

【问题标题】：Text display and gone again in JavaScript文本显示并在 JavaScript 中再次消失
【发布时间】：2020-11-26 10:39:48
【问题描述】：

我不知道发生了什么。我正在输入要解决的操作的值，但是当它显示结果时，它会显示但仅在很短的时间内显示。

function add(){
        var num1 = document.getElementById('fnum').value;
        var num2 = document.getElementById('snum').value;
        var ans = parseFloat(num1) + parseFloat(num2);

        document.getElementById('res').value = ans;
    }
<form>
  1st Number:<input type="text" id="fnum" name="Num1" /><br>
  2nd Number:<input type="text" id="snum" name="Num2" /><br><br>
  <input type="submit" value="Add" id="button1" name="button" onclick="add()"/>
  The result is:<input type="text" id="res" name="res" readonly="true" /><br>
</form>

【问题讨论】：

请熟悉您正在使用的元素：stackoverflow.com/questions/63509328/…
简单，不要使用
。
这能回答你的问题吗？ Understanding HTML Form Element behavior

标签： javascript

【解决方案1】：

因为您使用带有<button type="submit"> 的<form> 标记，所以表单已提交。

所以发生的事情是您的onclick 事件已处理，但完成后，仍会提交表单。您有多种方法可以解决此问题：

不要使用<form>
将<button> 类型更改为button
在 JavaScript 中处理表单提交
取消点击事件

这是一个没有<form> 标签和<button type="button"> 的工作版本：

function add() {
    var num1 = document.getElementById('fnum').value;
    var num2 = document.getElementById('snum').value;
    var ans = parseFloat(num1) + parseFloat(num2);

    document.getElementById('res').value = ans;
}

  1st Number:<input type="text" id="fnum" name="Num1" /><br>
  2nd Number:<input type="text" id="snum" name="Num2" /><br><br>
  <input type="button" value="Add" id="button1" name="button" onclick="add()" />
  The result is:<input type="text" id="res" name="res" readonly="true" /><br>

【讨论】：

【解决方案2】：

这是因为你的按钮是一个提交组件，改变：

<input type="submit" value="Add" id="button1" name="button" onclick="add()"/>

到

<button type="button" value="Add" id="button1" name="button" onclick="add()">add</button>

用于提交表单的提交组件，因此您需要在表单中执行有效操作。或者您可以对表单使用 onsubmit 事件来防止默认表单操作

【讨论】：