javascript不计算具有相同ID的值

Question

<tr>
    <td><input type="text" name="description" required /></td>
    <td><input type="text" name="quantity" id="quantity" onkeyup="sum();" required /></td>
    <td><input type="text" name="price" id="price" onkeyup="sum();" required /></td>
    <td><input type="text" name="lineTotal" id="lineTotal" readonly /></td>
    <td><input type="button" onclick="addLine();" value="+" /></td>
</tr>

下面是我的 JavaScript 代码

<script type="text/javascript">
function addLine() {
      var tabLines = document.getElementById("tabLines");
      var tabLinesRow = tabLines.insertRow(tabLines.rows.length-1);
      var col1html = "<input type='text' name='description' />";
      var col2html = "<input type='text' name='quantity' id='quantity' onkeyup='sum();' />";
      var col3html = "<input type='text' name='price' id='price' onkeyup='sum();' />";
      var col4html = "<input type='text' name='lineTotal' id='lineTotal' readonly />";
      var col5html = "<input type='button' onclick='removeLine(this);' value='-'>";


      var col1 = tabLinesRow.insertCell(0); col1.innerHTML=col1html;
      var col2 = tabLinesRow.insertCell(1); col2.innerHTML=col2html;
      var col3 = tabLinesRow.insertCell(2); col3.innerHTML=col3html;
      var col4 = tabLinesRow.insertCell(3); col4.innerHTML=col4html;
      var col5 = tabLinesRow.insertCell(4); col5.innerHTML=col5html;
    }

    function removeLine(lineItem) {
      var row = lineItem.parentNode.parentNode;
      row.parentNode.removeChild(row);
    }

    function sum() {
        var q = document.getElementById('quantity').value;
        var p = document.getElementById('price').value;
        var result = parseInt(q) * parseInt(p);

        if(q=="" || p==""){
            document.getElementById('lineTotal').value = 0;
        }

        if (!isNaN(result)) {
            document.getElementById('lineTotal').value = result;
        } 
    }

</script>

我正在尝试在这里做一些计算。当我计算默认的单行时，它确实会计算，当我按下添加按钮并在第二行中进行一些计算时，它会起作用，但是当我添加更多行时，它不会计算。我不知道如何解决。请帮助我，因为我是 javascript 新手

Answer 1

看来您的问题是您重复了 ID

尝试为添加的每一行的 ID 添加索引