为什么onclick不能正常工作而不返回false

Question

为什么onclick方法没有返回false就无法工作.当我尝试使用它而不返回false它显示答案然后值消失..

<form id="form1" method="POST">
    <table style="border:1px solid black">
        <tr>
            <td>First Number</td>
            <td>
                <input type="text" id="first">
            </td>
        </tr>
        <tr>
            <td>Second Number</td>
            <td>
                <input type="text" id="second">
            </td>
        </tr>
        <tr>
            <td>Result</td>
            <td>
                <input type="text" id="result">
            </td>
        </tr>
        <td>
            <button id="btn" value="Add" onClick="addNumbers();return false;">Add</button>
        </td>
    </table>
</form>

使用Javascript:

function addNumbers() {
    var firstNumber = document.getElementById('first').value;
    var secondNumber = document.getElementById('second').value;

    document.getElementById('result').value = firstNumber + secondNumber;
}

的jsfiddle

Answer 1

为什么onclick方法没有返回false工作？

button内部的默认操作是在form单击按钮时提交表单.要防止这种情况发生,您需要使用e.preventDefault()或return false按下按钮.

为什么价值观会消失？

提交表单后,页面将重定向到提交表单的URL.由于action未提供该属性,表单将提交到同一页面.并且由于未设置默认值,因此在重新加载页面时会清除这些值.

如何解决问题

您可以通过return false;在click事件处理函数中使用最后一个语句并return在HTML中的函数之前的onclick属性之前添加来阻止这种情况发生.

您忘记做的另一件事是在从DOM元素读取值时将字符串转换为Number.否则+将用作字符串连接运算符,结果将是一个连接字符串.

您可以通过+在字符串之前放置(一元+运算符)将字符串转换为数字.

更新小提琴:http://jsfiddle.net/tusharj/ufe7aqhw/

function addNumbers() {
  var firstNumber = +document.getElementById('first').value;
  var secondNumber = +document.getElementById('second').value;

  document.getElementById('result').value = firstNumber + secondNumber;

  return false;
}

<form id="form1" method="POST">
  <table style="border:1px solid black">
    <tr>
      <td>First Number</td>
      <td>
        <input type="text" id="first">
      </td>
    </tr>
    <tr>
      <td>Second Number</td>
      <td>
        <input type="text" id="second">
      </td>
    </tr>
    <tr>
      <td>Result</td>
      <td>
        <input type="text" id="result">
      </td>
    </tr>
    <td>
      <button id="btn" value="Add" onClick="return addNumbers();">Add</button>
    </td>
  </table>
</form>

边注:

我会建议/推荐

1. 不table用于格式化UI,您可以使用div简单的样式
2. 将样式移动到单独的样式表,而不是使用内联样式
3. 用于addEventListener绑定事件