Javascript 多功能不工作

Question

我正在使用三个 javascript 函数来求和输入字段值。但是前两个功能运行良好，但第三个功能不起作用。

这是我的 javascripts：

 <script language="javascript">
                function addNumbers()
                {
                        var val1 = parseInt(document.getElementById("ot").value);
                        var val2 = parseInt(40);
                        var ansD = document.getElementById("totalot");
                        ansD.value = val1 * val2;
                }
                function addSecincome(){
                        var val1 = parseInt(document.getElementById("totalot").value);
                        var val2 = parseInt(document.getElementById("mc").value);
                        var val3 = parseInt("1024");
                        var ansD = document.getElementById("secincome");
                        ansD.value = val3 * val1 + val2;

                }
                function addIncome(){
                     var val1 = parseInt(document.form.getElementById("totalot").value);
                        var val2 = parseInt("150");                       
                        var ansD = document.form.getElementById("INC");
                        ansD.value = val2 * val1 ;                
                }

        </script>

Here is my html codes:
  <tr height="20">
    <td height="20">BUYER</td>
    <td colspan="3"><input type="text" name="buyer" value=" " /></td>
    <td>OT</td>
    <td><input id="ot" type="text" name="ot" value="" /></td>
    <td><input type="text" id="totalot"  name="totalot" onclick="javascript:addNumbers()" value="" /></td>
    <td>MC</td>
    <td><input id="mc" type="text" name="mc" value=""  /></td>
    <td colspan="2"><input id="secincome" type="text"  onclick="javascript:addSecincome()" name="2ndincome" value="" /></td>
    <td>SMV</td>
    <td><input type="text" name="smv" value= "  " /></td>
    <td>O/QTY</td>
    <td><input type="text" name="oqyt" value=" " /></td>
    <td>TTL AVG</td>
    <td><input type="text" name="planeffi" value=" " /></td>
  </tr>

  <tr height="20">
    <td height="20">DAY INPUT</td>
    <td colspan="3"><input type="text" name="dayinput" value=" " /></td>
    <td colspan="2">PLAN HOUR</td>
    <td> <input type="text" name="planhour" vaue="10" /></td>
    <td colspan="2">PRO/LOSS</td>
    <td colspan="2"><input id="ploss" type="text" onclick="javascript:pp();" name="proloss" value="" /></td>
    <td>TGT</td>
    <td>T/TGT</td>
    <td>CUTTING</td>
    <td><input type="text" name="cutting" value=" " /></td>
    <td rowspan="2"><input type="text" name="ttlavg" value=" " /></td>
    <td>&nbsp;</td>
  </tr>

虽然函数语法相同，但第三个函数对我不起作用。我尝试过使用不同的输入 ID，但它对我不起作用。但前两个功能正在工作。我不明白这个问题，我以前没有这种问题。

需要您的帮助，谢谢。

Answer 1

从document.form.getElementById("totalot"); 更改为document.getElementById("totalot");

function addIncome() {
    var val1 = parseInt(document.getElementById("totalot").value); //Removed .form here
    var val2 = parseInt("150");                       
    var ansD = document.form.getElementById("INC"); //Removed .form here too
    ansD.value = val2 * val1 ;                
}

我也刚刚意识到您的 HTML 代码在任何地方都没有引用您的 addIncome() 函数？您需要将其附加到 HTML 中的事件。您的其他两个函数运行 onclick 的输入框。

<input id="secincome" type="text"  onclick="javascript:addSecincome()" name="2ndincome" value="" />

我建议将onclick 更改为onchange。然后你需要在右边的文本框中添加下面这行onchange="addIncome()"来运行这个不起作用的函数。

还有val2 = parseInt("150") - 创建字符串并将其更改为数字毫无意义？ - 只需在值周围省略"" 引号即可写入val2 = 150，它将是一个数字。甚至更简单的ansD.value = 150 * val1;。无需将 150 分配给变量

我还可以建议通过将parameters 传递给函数来创建一个可重复使用的函数，然后您可以重复使用，从而使您的代码更加动态。

Answer 2

试试这个吧！

function addIncome() {
    var val1 = parseInt(document.getElementById("totalot").value);
    var val2 = parseInt("150");                       
    var ansD = document.form.getElementById("INC");
    ansD.value = val2 * val1 ;                
}