Question

我是JavaScript＆amp;我正在寻找一些帮助做两个数字的简单乘法＆amp;在另一个文本框中显示结果。我一直试图让这项工作好几天无济于事（

以下是基本HTML以及JavaScript＆amp;这里是一个小提琴的链接http://jsbin.com/egeKAXif/1/edit

我做错了什么？

我想写的应用程序至少有12行，我如何扩展JavaScript / HTML以适应这种情况？每个输入标识符都需要是唯一的吗？

任何帮助表示赞赏：）

    <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。

将两个输入与JavaScript和＆amp;在文本框中显示

2 个答案: