関数の値を追加する代わりにonclickボタンを得る方法

Question

私は、JavaScriptをもっとよく知るためにHTMLフォーム内に単純な電卓を追加しました。 JavaScriptを次のようになります -

function add() { 
var x = document.getElementById("numberOne").value; 
var y = document.getElementById("numberTwo").value; 
return parseInt(x) + parseInt(y); 
} 

HTML - 今

<form> 
<input id="numberOne" type="number"/></br> 
<input id="numberTwo" type="number"/></br> 
<input type="button" value="Calculate" 
onclick="document.body.appendChild(document.createTextNode(add()));"/> 
</form> 

、ボタンをクリックすると、何が起こるかは、それだけで直線として値を追加しています。たとえば、5と5を入力して3回Calculateをクリックすると、3つの別々の時間10の代わりに101010が得られます。

出力を置き換えるか、別の行に表示するか、直線ではなく表示することができます。

Answer 1

あなたは別の結果のdivを作成し、それを毎回上書きすることができます。

<form> 
<input id="numberOne" type="number"><br> 
<input id="numberTwo" type="number"><br> 
<div id="result"></div> 
<input type="button" value="Calculate" 
onclick="document.getElementById('result').innerText = add();"> 
</form> 

Answer 2

Mehuls答えが正しいのですが、...

• のonclick属性内のアクションを適用しないでください、あなた
• 要素を変数に代入するため、スクリプトはDOMツリー全体でをこの要素に対して検索しませんinnerTextは、ブラウザが

をリフローする原因となりますので、 のTextContent代わりのinnerText のボタン

使用をICK