爲什麼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

來源

2015-10-04 Viktor

難道你真的試圖將兩個字符串加在一起？或者你寧願將字符串轉換爲數字並添加它們？ – 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綁定事件

來源

2015-10-04 11:31:25 Tushar

因爲return false用於停止的onclick的默認操作，這是提交表格。你顯然還沒有爲你的表單定義發佈處理程序。所以如果你提交你的表單，你會得到一個錯誤。

來源

2015-10-04 11:27:43 JasmineOT

爲什麼onclick無法正常工作而沒有返回false

回答

相關問題