Question

我在JSBin（http://jsbin.com/lejoxesari/1/edit?html,js,output）上找到了一些代码，它起到了很好的作用，直到我尝试让它适应更多！现在我似乎有一个错误，它不会计算第二个字段。

我的编辑代码如下所示;

<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2015 by anonymous (http://jsbin.com/fivesocaku/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

<table width="80%" border="0">
  <tr>
    <th>Qty</th>
    <th>1.2m</th>
    <th></th>
    <th>1.8</th>
    <th></th>
  </tr>
  <tr>
    <td><input id="qty" type="text" oninput="calculate()" /></td>
    <td><input id="R12" type="text" oninput="calculate()" /></td>
    <td><input id="b12" type="hidden" value="5" oninput="calculate()" /></td>
    <td><input id="R18" type="text" oninput="calculate()" /></td>
    <td><input id="B18" type="hidden" value="2" oninput="calculate()" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

<script id="jsbin-javascript">
    function calculate() {
        var myBox1 = document.getElementById('qty').value;  
        var myBox2 = document.getElementById('b12').value;
        var result = document.getElementById('R12');    
        var myResult = myBox1 * myBox2;
        result.value = myResult;
        var myBox4 = document.getElementById('b18').value;
        var result18 = document.getElementById('R18');  
        var myResult18 = myBox1 * myBox4;
        result.value = myResult;

    }
</script>
</body>
</html>

我似乎没有报告任何错误，但想知道是否有人可以看一看并告诉我错误的位置。

谢谢！

Answer 1

var myBox4 = document.getElementById('b18').value;

b18必须为UPPERCASE

var myBox4 = document.getElementById('B18').value;

Answer 2

你试图通过id b18而不是B18来获取元素。此外，您将再次将值分配给结果（覆盖它），而不是结果18。

如果我可以提供2美分，请为变量使用更有意义的名称，并为它设置一些模式（相同的套管，带/带数字等）

Answer 3

    var myBox4 = document.getElementById('b18').value;

您获得的元素ID不存在

   var result18 = document.getElementById('R18');  
   var myResult18 = myBox1 * myBox4;
   result.value = myResult;

最后一次分配应该是result18.value = myResult，您将被分配到同一个文本框两次。

Javascript计算不适用于第二个文本字段

3 个答案: