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属性，表单将提交到同一页面。并且由于未设置默认值，因此在重新加载页面时会清除这些值。

如何解决问题

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

您忘记做的另一件事是在从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>

<强>旁注：

我会建议/推荐

不使用table格式化用户界面，您可以使用简单样式的div
将样式移动到单独的样式表，而不是使用内联样式
使用addEventListener绑定事件

Answer 2

因为return false用于停止提交表单的onclick的默认操作。而且你显然没有为你的表单定义帖子处理程序。因此，如果您提交表单，则会收到错误。

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

2 个答案: