Javascript - 使用动态文本输入垂直和水平执行操作

Question

需要帮助 我在这里使用一些动态的文本输入，具体取决于用户输入的数量。 我想做的是使用 OnKeyUp JavaScript 在用户输入值后自动计算文本输入。这里是 PHP 和 HTML 代码：

<?Php
$x = 10;
$i = 0;
for($i=0; $i<$x; $i++){
    echo "<input type='text' onkeyup='multiply()' id='tb1'>";
    echo "x";
    echo "<input type='text' onkeyup='multiply()' id='tb2'>";
    echo "=";
    echo "<input type='text' onkeyup='multiply()' id='tb3'>";
    echo "<br>";
}
?>
total:<input type='text' onkeyup='multiply()' id='tb4'>

这是JavaScript：

<script>
    function multiply(){
        var textbox1 = document.getElementById('tb1').value;
        var textbox2 = document.getElementById('tb2').value;
        var result = parseFloat(textbox1) * parseFloat(textbox2);
        if(!isNaN(result))
        {
            document.getElementById('tb3').value = result;
        }
    }
</script>

现在，第一行文本输入工作正常，但其余的文本输入我不知道我在这里错过了一些东西，我无法弄清楚，怎么能我从 TB1 和 TB2 水平计算这些值，然后将其显示在 TB3 上并垂直计算 TB3 的所有值并以 TB4 显示。任何帮助都非常感谢。蒂亚

Answer 1

所有行都包含具有相同 id 的元素。因此，第 1 行将包含 id 为：tb1、tb2、tb3 的元素。第 2 行还将包含 ID 为 tb1、tb2 和 tb3 的元素。

页面上每个元素的 id 必须是唯一的。您可以通过将行号附加到 id 来使 id 唯一。例如：

<?php
$x = 10;
$i = 0;
for($i=0; $i<$x; $i++){
    echo "<input type='text' onkeyup='multiply(" . $i . ")' id='tb" . $i . "-1'>";
    echo "x";
    echo "<input type='text' onkeyup='multiply(" . $i . ")' id='tb" . $i . "-2'>";
    echo "=";
    echo "<input type='text' onkeyup='multiply(" . $i . ")' id='tb" . $i . "-3'>";
    echo "<br>";
}
?>
Total: <input type='text' id='tb4'> <input type='button' onclick='CalculateSum()' title='Calculate Sum'>

然后，您的 JavaScript 代码将如下所示：

<script>
    function multiply(row) {
        var textbox1 = document.getElementById('tb' + row + '-1').value;
        var textbox2 = document.getElementById('tb' + row + '-2').value;
        var result = parseFloat(textbox1) * parseFloat(textbox2);
        if(!isNaN(result))
        {
            document.getElementById('tb' + row + '-3').value = result;
        }
    }
    function CalculateSum() {
        let total = 0;
        for (let i=0; i < 10; i++) {
            total += document.getElementById('tb' + i + '-3').value;
        }
        document.getElementById('tb4').value = total; 
    }
</script>