带有文本框的javascript动态乘法

Question

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

这是我的代码：

<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>

Answer 2

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

这绝不是最好的方法，但它与您的代码足够相似，所以它应该是您最容易遵循的。

Answer 3

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

<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>

试试看 这是关于选择第一个元素的值并在循环中忽略它

Answer 4

只需像这样更改您的 JavaScript 代码：

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

Answer 5

我建议你使用下面的 sn-p，我试图在你的代码中增强一些东西，并使它与你想要的乘法一起工作：

1. 我删除了 HTML 中函数的调用，因为最好不要使用内联脚本；然后将其代码移到 .onkeyup 事件处理程序中
2. 我使用一元运算符使它更容易。 (+ operator vs parseFloat)

这是一个有效的 sn-p：
（详情见我代码中的cmets）

// TAKIT: Launch the function when there's a change in ".amount" elements
var amounts = document.querySelectorAll('.amount');
amounts.forEach(function(elm, index) {
  this.onkeyup = function(){
    var sum = 1, i; // Changed sum = 0 to 1
    for (i = 0; i < amounts.length; i++) {
      sum *= +amounts[i].value || 0; // TAKIT: I propose Unary operator instead of parseFloat
    }
    document.submitform.tamt.value = sum;
  }
});

<form name="submitform">
  <table>
    <tr id="service">
      <td>
        <span>Amount:</span>
      </td>
      <td>
        <input type="text" name="amount" class="amount" autocomplete="off" />
      </td>
      <td>
        <span>Width: </span>
      </td>
      <td>
        <input type="text" name="amount" class="amount" autocomplete="off" />
      </td>
    </tr>
    <tr>
      <td>
        <h4>Total Amount</h4>
      </td>
      <td>
        <input type="text" name="tamt" id="tamt" />
      </td>
    </tr>
  </table>
</form>

希望对你有帮助。