Uncaught TypeError: Cannot read property 'value' of null Javascripting

Question

var i = 0;
function addLine() {
        i++;        
        var div = document.createElement('div');
        div.innerHTML += '<input type="text" name="description['+i+']" id="description['+i+']"/>';
        div.innerHTML += '<input type="text" name="quantity['+i+']" id="quantity['+i+']" onkeyup="sum();"/>';
        div.innerHTML += '<input type="text" name="price['+i+']" id="price['+i+']" onkeyup="sum();"/>';
        div.innerHTML += '<input type="text" name="lineTotal['+i+']" id="lineTotal['+i+']" readonly/>';
        div.innerHTML += '<input type="button" onclick="removeLine(this)" value="-">';
        div.innerHTML += '<input type="button" onclick="addLine();" value="+" />';

        document.getElementById('items').appendChild(div);
    }

    function removeLine(div) {
      document.getElementById('items').removeChild(div.parentNode);
    }

    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>

下面是html

<tr>

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

</tr>

因此，当我尝试添加新行时，它运行良好，没有任何问题。

当我对html中的第一个进行计算时，它可以毫无问题地进行所有计算，但是当我添加新的动态线时，我无法计算。这几天一直在努力解决这个问题，仍然没有得到结果，所以我决定在这里问问。

非常感谢您的帮助。

非常感谢:)

Answer 1

ID 应该是唯一的

我还用 TR 替换了 DIV 并添加了 TD 以与 table 一致

<table id="items">
<tr>

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

</tr>
</table>
<script>
var i = 0;
function addLine() {
        i++;        
        var row = document.createElement('tr');
        var td = document.createElement('td');
        td.innerHTML = '<input type="text" name="description['+i+']" id="description['+i+']"/>';
        row.appendChild(td);
        td = document.createElement('td');
        td.innerHTML = '<input type="text" name="quantity['+i+']" id="quantity['+i+']" onkeyup="sum('+i+');"/>';
        row.appendChild(td);
        td = document.createElement('td');
        td.innerHTML = '<input type="text" name="price['+i+']" id="price['+i+']" onkeyup="sum('+i+');"/>';
        row.appendChild(td);
        td = document.createElement('td');
        td.innerHTML = '<input type="text" name="lineTotal['+i+']" id="lineTotal['+i+']" readonly/>';
        row.appendChild(td);
        td = document.createElement('td');
        td.innerHTML = '<input type="button" onclick="removeLine(this.parentNode.parentNode)" value="-">';
        row.appendChild(td);
        td = document.createElement('td');
        td.innerHTML = '<input type="button" onclick="addLine();" value="+" />';
        row.appendChild(td);

        document.getElementById('items').appendChild(row);
    }

    function removeLine(row) {
      document.getElementById('items').removeChild(row);
    }

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

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

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

</script>

Uncaught TypeError: Cannot read property 'value' of null Javascripting

Uncaught TypeError: Cannot read property 'value' of null Javascripting

javascript

row

dynamic