JavaScriptで2つの入力を掛けてテキストボックスに表示する

Question

JavaScript &の新機能です。結果を別のテキストボックスに表示する2つの数字&を単純に乗算してヘルプを探しています。私は無駄:(ここで

日間、この作業を取得しようとしていることは私が間違っているのは何のJavaScript &ここフィドルhttp://jsbin.com/egeKAXif/1/edit

へのリンクと一緒に基本的なHTMLのですか？

私が書きたいアプリケーションは？私にはJavaScript/HTMLはこれに対応するために拡張する方法を、少なくとも12行を持つことになり、各入力識別子は、任意のヘルプ？

一意である必要があります:)

を高く評価

<table width="80%" border="0"> 
    <tr> 
     <th>Box 1</th> 
     <th>Box 2</th> 
     <th>Result</th> 
    </tr> 
    <tr> 
     <td><input id="box1" type="text" /></td> 
     <td><input id="box2" type="text" onchange="calculate()" /></td> 
     <td><input id="result" /></td> 
    </tr> 

    </table> 

<script> 

    function calculate() { 
    var myBox1 = document.getElementById('box1').value; 
    var myBox2 = document.getElementById('box2').value; 
    var result = document.getElementById('result'); 
    var myResult = box1 * box2; 
    result.innerHTML = myResult; 

} 
</script> 

Answer 1

最初に変更しなければならないことは、乗算がある行です。それは次のようにする必要があります：var myResult = myBox1 * myBox2;

入力フィールド（使用値）でinnerHTMLを使用しないでください。

これに加えて、入力がフォーカスを失うと、onchangeイベントが発生します。 oninputイベントを使用することもできます。

は作業例を見てみましょう：http://jsbin.com/OJOlARe/1/edit

Answer 2

<table width="80%" border="0"> 
    <tr> 
    <th>Box 1</th> 
    <th>Box 2</th> 
    <th>Result</th> 
    </tr> 
    <tr> 
    <td><input id="box1" type="text" oninput="calculate();" /></td> 
    <td><input id="box2" type="text" oninput="calculate();" /></td> 
    <td><input id="result" /></td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
</table> 
<script> 


    function calculate() { 
     var myBox1 = document.getElementById('box1').value; 
     var myBox2 = document.getElementById('box2').value; 
     var result = document.getElementById('result'); 
     var myResult = myBox1 * myBox2; 
      document.getElementById('result').value = myResult; 

    } 
</script> 

あなたが直接javascriptの変数にresult.innerHTML = myResult;を使用することはできません。まず、html DOM要素document.getElementById('result')を読み込み、次に入力項目のvalueプロパティを呼び出すかdiv、span要素のinnerHTMLを呼び出す必要があります。