为什么onclick无法正常工作而没有返回false

问题描述：

为什么在没有返回false的情况下onclick方法无法正常工作。当我尝试使用它没有回报虚假它显示的答案，然后值消失..为什么onclick无法正常工作而没有返回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

难道你真的试图将两个字符串加在一起？或者你宁愿将字符串转换为数字并添加它们？ – brianlmerritt

加上回答你的问题http://stackoverflow.com/questions/128923/whats-the-effect-of-adding-return-false-to-an-onclick-event – brianlmerritt

答

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

的button的form内的默认行为是来提交表单当你点击的按钮。为防止这种情况发生，您需要使用按钮单击上的e.preventDefault()或return false。

为什么值会消失？

当表单被提交时，页面被重定向到表单被提交的URL。由于未提供action属性，因此表单会提交到同一页面。由于未设置默认值，因此重新加载页面时会清除这些值。

如何解决这个问题

您可以通过在点击事件处理函数的最后一条语句使用return false;并添加return在HTML功能之前onclick属性之前阻止这种情况发生。

你忘了做的另一件事是当从DOM元素读取值时将字符串强制转换为数字。否则+将用作字符串连接运算符，结果将是一个连接字符串。

您可以通过在字符串前加上+（一元+运算符）将字符串强制转换为数字。

更新小提琴：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绑定事件

答

因为return false用于停止的onclick的默认操作，这是提交表格。你显然还没有为你的表单定义发布处理程序。所以如果你提交你的表单，你会得到一个错误。

为什么onclick无法正常工作而没有返回false

相关推荐