带有文本框的javascript动态乘法

Question

我试图在文本框中进行动态乘法运算。现在我只想做添加。请看看我的js代码。我想将这 2 个值相乘。

这是我的代码:

<form name="submitform">
    <table>
        <tr id="service">
            <td>
                <span>Amount:</span>
            </td>
            <td>
                <input type="text" name="amount" class="amount" onkeyup="onkeyupsum()" autocomplete="off" />
            </td>
            <td>
                <span>Width: </span>
            </td>
            <td>
                <input type="text" name="amount" class="amount" onkeyup="onkeyupsum()" autocomplete="off" />
            </td>
        </tr>

        <tr>
            <td>
                <h4>Total Amount</h4>
            </td>
            <td>
                <input type="text" name="tamt" id="tamt" />
            </td>
        </tr>
    </table>
</form>

JavaScript 代码(HTML 格式):

function onkeyupsum() { // calculate sum and show in textbox
    var sum = 0,
    amount = document.querySelectorAll('.amount'), i;
    for (i = 0; i < amount.length; i++) {
        sum += parseFloat(amount[i].value || 0);
    }
    document.submitform.tamt.value = sum;
}

Answer 1

在变量初始化中设置 multiply = 1，并使用 multiply *= parseFloat(amount[i].value || 1); 计算乘法值:

function onkeyupsum() { // calculate sum and show in textbox
var multiply = 1,
    amount = document.querySelectorAll('.amount'), i;
for (i = 0; i < amount.length; i++) {
    multiply *= parseFloat(amount[i].value || 1);
}
document.submitform.tamt.value = multiply;
}

<form name="submitform">
<table>
    <tr id="service">
        <td> <span>Amount:</span>
        </td>
        <td>
        <input type="text" name="amount" class="amount" onkeyup="onkeyupsum()" autocomplete="off" />
        </td>

        <td> <span>Width: </span>
        </td>
        <td>
        <input type="text" name="amount" class="amount" onkeyup="onkeyupsum()" autocomplete="off" />
        </td>
    </tr>

    <tr><td>
    <h4>Total Amount</h4>
    </td><td>

    <input type="text" name="tamt" id="tamt" />
    </td></tr>

</table>
</form>