Question

我的网页内有多个文本框。我需要从一个文本框中取一个值并将其与另一个文本框相乘，然后将该答案显示给第三个文本框，即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;

}

和相应的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 newb所以请善待。提前谢谢。

Answer 1

使用parseFloat（...），即

var rate = parseFloat(document.getElementById(rate).value);
var numunit = parseFloat(document.getElementById(numunit).value));


var sum = numunit * rate;

此外，在您的函数调用中也会出现拼写错误，即“caclulateLineTotal”而不是“calculateLineTotal”

另外，不要再设置总变量，即不要设置

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

另外，请注意，您对calculateLineTotal的第二次调用，即元素Rate1，在Rate1之后错过了一次结束

应该是

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

Answer 2

请参阅fiddle

使用名为“更改”的querySelectAll添加要选择的课程

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

使用addEventListener绑定更改。运行forloop添加回调，注意函数bindCalculateTotal返回另一个函数。

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"));
}

另请注意我们如何使用“* Id”名称来存储值。这修复了这一行

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

Answer 3

你说文本框绑定到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>

然后作为相应的视图模型：

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());

JSFiddle：http://jsfiddle.net/mZk42/3/

如何将2个文本框值与javascript相乘，并将答案输出到第3个文本框，即ko.observable

3 个答案: