如何使用javascript将两个文本框值相乘，并将答案输出到第三个文本框，该文本框为ko.observable

我有一个网页，在一个表中有多个文本框。我需要从一个文本框中获取一个值，并将其与另一个文本框相乘，然后将该结果显示给第三个文本框，即ko.observable。我已经写了下面的javascript，我根本无法让它工作。绝对什么也没发生

<script type="text/javascript">

function calculateLineTotal(numunit, rate, total) {
    var rate = document.getElementById(rate).value;
    var numunit = document.getElementById(numunit).value;


    var sum = numunit * rate;


    document.getElementById(total).value = sum;

}

函数计算器总计（数量、比率、总计）{
var rate=document.getElementById（rate）.value；
var numint=document.getElementById（numint）.value；
var总和=货币*汇率；
document.getElementById（总计）.value=sum；
}

以及相应的HTML：

 <td><input class="text"  type="number" name="NumUnit1" id="NumUnit1" value="0.00" onchange="calculateLineTotal('NumUnit1','Rate1','Total1')"/></td>
                <td><input class="text"  type="number" name="Rate1" id="Rate1" value="0.00" onchange="calculateLineTotal('NumUnit1','Rate1','Total1')"/></td>

                <td><input data-bind="value: total1" type="number" class="text" name="Total1" id="Total1" value="0.00"/></td>

我尝试过简化函数，当第一个文本框值改变时，只抛出一个警报，然后什么也没有发生。我也是一个javascript新手，所以请友善一点。提前感谢。

使用parseFloat（…），即

对函数的一次调用中也有一个输入错误，即“caclulateLineTotal”而不是“calculateLineTotal”

此外，不要再次设置total变量，即不要这样做

var total = parseFloat(document.getElementById(total).value);

另外，请注意，您对calculateLineTotal的第二次调用，即对于element Rate1，缺少Rate1之后的结束

应该是

<input class="text"  type="number" name="Rate1" id="Rate1" value="0.00" onchange="calculateLineTotal('NumUnit1','Rate1','Total1');"/>

请参见

使用名为“更改”的

querySelectAll

添加要选择的类

还要注意我们如何使用“*Id”名称来存储值。这就解决了这个问题

  document.getElementById(total).value = sum; // error: total is number, not the id

---

您说文本框绑定到一个

ko.observable

，即您正在使用KnockoutJS。因此，一个更干净的方法是：

<table>
    <tr>
        <td><input class="text" type="number" data-bind="value: numUnit1" /></td>
        <td><input class="text" type="number" data-bind="value: rate1" /></td>

        <td><input class="text" type="number" data-bind="value: total1" /></td>
    </tr>
</table>

---

JSFiddle:

这是否解释了为什么将函数简化为警报（“调用成功”）不起作用。。。对不起，但无论如何你都得用浮动汇率，这正是我最初想到的。让我检查一下另一个问题。等一下。是的，上面的胜利指出了这一点。谢谢你。我仍然没有得到的功能工作，但是。谢谢你的帮助。非常感谢。另外，您正在重置函数中的total变量。在使用javascript时，保持调试器/浏览器控制台处于打开状态是一个好主意。您将立即发现类似的问题。您有一个拼写错误

caclulateLineTotal

应该是

calculateLineTotal

。调试器会出现什么错误？捕捉得很好！所以这肯定让电话本身起作用了！哇，我觉得自己像个白痴。非常感谢。然而，现在我得到了一个新的错误。当我在第一个文本框中输入一个值，然后切换到下一个文本框时，它会显示UncaughtTypeError：无法在调试器中将属性“value”设置为null。请参阅我的解决方案，这显示了一种更干净的方法。现在的一个大问题是左右两侧有相同的变量名，特别是对于

total

。第二行

getElementById（total）

将传递您在

var total=document.getElementById（total.value）行上设置的“number”值在询问之前，您应该查找并修复代码中的拼写错误。谢谢你们，JK，但我相信你们所有人都知道，在你们连续18个小时盯着代码看之后，一切都开始被你们理解了。我真的很感谢大家的帮助和投入。再次谢谢你。很高兴听到这个消息！试试看，有什么问题就告诉我。顺便说一句，KnockoutJS最强大的一点是它的——非常容易阅读，试一试。你的问题实际上与他们文档中的问题几乎相同。（最后，听起来你可能有很多这样的表格行，如果你还没有，你可以将它们自动化，但如果你想的话，这最适合一个新问题。）是的，我能在Knockout上取得如此成就的唯一方法是因为它们的惊人文档和实例。签出当前淘汰脚本的JSFIDLE。我不确定在哪里实施你的建议。再次感谢。我已更新了我的，以反映我认为它将如何实施。它根本不起作用。有什么建议吗？谢伊，我不知道我能为此感谢你到什么程度！！我终于实现了梦想。对于以后发现此线程的任何人，我已经更新了我的脚本，以显示我最终使用的脚本，从而使其正常工作。感谢大家的慷慨和帮助新手的意愿！任何稍后讨论此问题的人，请记住将KnockoutJS脚本本身作为外部资源包含在JSFiddle中。
var inputs = document.querySelectorAll("input.changes");
var bindCalculateTotal = function (numunitId, rateId, totalId) {
    return function(event) {
        console.log(numunitId, rateId, totalId);
        console.log( document.getElementById(totalId).value);
        var rate = document.getElementById(rateId).value;
        var numunit = document.getElementById(numunitId).value;
        var total = document.getElementById(totalId).value;
        var sum = numunit * rate;
        document.getElementById(totalId).value = sum;
    };
};

for (var ii = 0; ii < inputs.length; ii++) {
     inputs[ii].addEventListener(
         'change', 
         bindCalculateTotal("NumUnit1", "Rate1", "Total1"));
}

  document.getElementById(total).value = sum; // error: total is number, not the id

<table>
    <tr>
        <td><input class="text" type="number" data-bind="value: numUnit1" /></td>
        <td><input class="text" type="number" data-bind="value: rate1" /></td>

        <td><input class="text" type="number" data-bind="value: total1" /></td>
    </tr>
</table>

var ViewModel = function() {
    var self = this;

    self.numUnit1 = ko.observable('0.00');
    self.rate1 = ko.observable('0.00');

    self.total1 = ko.computed(function() {
        var total = parseFloat(self.numUnit1()) * parseFloat(self.rate1());

        return total.toFixed(2); // assuming you want to show to 2 decimal places
    });
};

ko.applyBindings(new ViewModel());