时间戳

首页 > 解决方案 > 文本显示并在 JavaScript 中再次消失

javascript - 文本显示并在 JavaScript 中再次消失

问题描述

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

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>

标签： javascript

解决方案

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

所以发生的事情是你的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>

推荐阅读