javascript不计算具有相同ID的值

下面是我的javascript代码

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

函数addLine（）{
var tabLines=document.getElementById（“tabLines”）；
var tabLinesRow=tabLines.insertRow（tabLines.rows.length-1）；
var col1html=“”；
var col2html=“”；
var col3html=“”；
var col4html=“”；
var col5html=“”；
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；
}
函数removeLine（行项目）{
var row=lineItem.parentNode.parentNode；
row.parentNode.removeChild（row）；
}
函数和（）{
var q=document.getElementById（'quantity'）。值；
var p=document.getElementById（'price'）。值；
var结果=parseInt（q）*parseInt（p）；
如果（q==“”| | p==“”）{
document.getElementById（'lineTotal'）。值=0；
}
如果（！isNaN（结果））{
document.getElementById（'lineTotal'）。值=结果；
} 
}

---

我想在这里做一些计算。当我计算默认的单行时，它会计算，当我按下add按钮并在第二行中进行一些计算时，它会工作，但当我添加更多行时，它不会计算。我不知道怎么解决它。请帮助我，因为我是javascript的新手，看起来你的问题是你在复制ID

---

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

看起来您的问题在于您正在复制ID

---

尝试为添加的每一行添加ID索引。ID必须是唯一的。如果您需要引用相同的元素，请改用

class

。

ID必须是唯一的。如果您需要引用相同的元素，请改用

class

。

这就是您的问题所在。HTML元素中的id属性在整个页面中应该是唯一的。但是，您可以尝试为行中的每个重复元素添加一个索引作为后缀，如“quantity1”、“price1”等

---

我还建议您在浏览器中试用开发人员工具，特别是控制台和调试器。在那里，您可以逐步运行javascript代码（调试器）或按需运行javascript代码（控制台），以检查哪里有错误。

这就是您的问题所在。HTML元素中的id属性在整个页面中应该是唯一的。但是，您可以尝试为行中的每个重复元素添加一个索引作为后缀，如“quantity1”、“price1”等

---

我还建议您在浏览器中试用开发人员工具，特别是控制台和调试器。在那里，您可以逐步运行javascript代码（调试器）或按需运行javascript代码（控制台），以检查哪里有错误。

ID在HTML中必须是唯一的。您可以改为使用类。ID在HTML中必须是唯一的。您可以使用类来代替。为了使它能够使用这种方法，您还必须更改sum（）方法，以便获得具有相应类的所有元素（检查）他不会让他的课完全不同。那将使目的落空。他将使用您提到的

文档.getElementsByCassName（）

，但他可以从那里索引所有内容。很明显，这只是实现他尝试的众多方法中的一种。我想知道如何对id进行索引，因为我认为这将是一个更简单的解决方案，因为getElementsByClassName仍然无法使用这种方法，从将所有的

id='price'

和

id='quantity'

更改为

class='price'

和

class='quantity'

，您还必须更改sum（）方法，以获得所有元素和相应的类（检查），他不会使他的类完全不同。那将使目的落空。他将使用您提到的

文档.getElementsByCassName（）

，但他可以从那里索引所有内容。很明显，这只是实现他尝试的众多方法中的一种。我想知道如何为id编制索引，因为我认为这将是一个更简单的解决方案，因为getElementsByClassName仍然不起作用，我正在将quantity1作为索引。它起作用了。。但是我仍然无法进行计算，我将数量1作为索引。它起作用了。。但我仍然无法进行计算

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