将两个输入与JavaScript相乘并在文本框中显示

我是JavaScript新手&正在寻找一些帮助简单地乘两个数字&在另一个文本框中显示结果。我一直在努力得到这个工作了几天无果:(将两个输入与JavaScript相乘并在文本框中显示

下面是使用JavaScript &这里提琴http://jsbin.com/egeKAXif/1/edit

链接我在做什么错沿基本HTML？

该应用程序我想写将至少有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>

来源

2014-01-19 NRKirby

你必须改变的第一件事是与乘法的界限。它应该是：var myResult = myBox1 * myBox2;

您不应该对输入字段使用innerHTML - 使用值。

此外，onchange事件仅在输入失去焦点时才会触发。您可能需要使用事件。

看看在工作实例：http://jsbin.com/OJOlARe/1/edit

来源

2014-01-19 22:08:12 Alex

天才！它现在正在工作:) 我该如何扩展这个在12行的表上工作？我想我需要遍历整个表？每个输入/结果都需要不同的ID吗？ – NRKirby

嘿@ user3213157！如果您发现这个答案有用，您可以通过点击答案左侧的复选标记使其成为“接受的答案”。至于你在前面的评论中提出的新问题：如果问题仍然存在，最好问一个全新的问题！并且：欢迎来到StackOverflow :-) – Josien

以下是多个字段的示例：http://jsbin.com/uNOVeHig/1/edit希望您不介意使用jquery。但它使它更容易。 – Alex

-1

<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')，然后为div，span元素调用input属性的value属性或innerHTML。

来源

2018-02-20 11:22:53

如果你想添加一些评论来解释这个答案，那将是非常好的。经过审查后，仅有代码的答案经常会被删除。参见[如何提问]（https://stackoverflow.com/help/how-to-ask）。 – NightOwl888

好吧我的坏！谢谢你的讲述。 –

将两个输入与JavaScript相乘并在文本框中显示

回答

相关问题