There are 2 tables: Products and shopping cart

enter image description here

When you click the "Add product" button, an entry is added to the second table. Also, in the basket we can change the "Quantity", then the "Amount" should immediately change, this particular moment cannot be realized

function addRow(id) { var name = document.getElementById("gds").value; var count = document.getElementById("cnt").value; var price = document.getElementById("prc").value; //кусок кода где пытался реализовать изменение var summa = price * count; var add_input = document.createElement("input"); add_input.setAttribute("type", "number"); add_input.setAttribute("name", "numb"); add_input.setAttribute("value", count); add_input.setAttribute("onchange", "changeSum(count, price)"); var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0]; var row = document.createElement("TR"); var td1 = document.createElement("TD"); td1.appendChild(document.createTextNode(name)); var td2 = document.createElement("TD"); td2.appendChild(add_input); var td3 = document.createElement("TD"); td3.appendChild(document.createTextNode(price)); var td4 = document.createElement("TD"); td4.appendChild(document.createTextNode(summa)); row.appendChild(td1); row.appendChild(td2); row.appendChild(td3); row.appendChild(td4); var td5 = document.createElement("TD"); row.appendChild(td5); td5.setAttribute('onmousedown', 'this.parentNode.parentNode.removeChild (this.parentNode);'); td5.innerHTML = "Удалить"; tbody.appendChild(row); } // пытался сделать функцию для изменения function changeSum(count, price) { var summa; summa = price * count; return summa; } 
 #add { border: 1px solid black; width: 300px; height: 150px; } #btn { margin-left: 70px; margin-top: 10px; } #basketForm { border: 1px solid black; display: inline-block; } #basketTable tr+tr:hover { background: #f3bd48; /* Цвет фона при наведении */ color: #fff; /* Цвет текста при наведении */ } 
 Товары <form id="add"> <table> <tr> <td>Название товара: </td> <td> <select id="gds"> <option>Молоко</option> <option>Хлеб</option> <option>Сигареты</option> <option>Алкоголь</option> </select> </td> </tr> <tr> <td>Количество товара: </td> <td><input type="number" id="cnt" /></td> </tr> <tr> <td>Цена товара: </td> <td><input type="number" id="prc" /></td> </tr> </table> <input type="button" id="btn" onclick="addRow('basketTable')" value="Добавить в корзину" /> </form> <br /> <form id="basketForm"> <table id="basketTable" border="1"> <tr> <th>Товар</th> <th>Количество</th> <th>Цена</th> <th>Сумма</th> <th></th> </tr> </table> </form>

    2 answers 2

    First, we will transfer only the current event element to the function - the text field

     add_input.setAttribute("onchange", "changeSum(this)"); add_input.setAttribute("onkeyup", "changeSum(this)"); add_input.setAttribute("onmouseup", "changeSum(this)");

    We will also run the function not only when changing, but also when releasing the mouse button and keyboard.

    Further:

     function changeSum(el) { // Количество - значение переданого елемента var count = el.value; // Елемент цены - берем родительский елемент input'а (tr) и следующий от него елемент var priceElement = el.parentElement.nextSibling; var total = count*priceElement.innerText; // Елемент "итого" - следующий после цены var totalElement = priceElement.nextSibling; totalElement.innerText = total; } 

     function addRow(id) { var name = document.getElementById("gds").value; var count = document.getElementById("cnt").value; var price = document.getElementById("prc").value; //кусок кода где пытался реализовать изменение var summa = price * count; var add_input = document.createElement("input"); add_input.setAttribute("type", "number"); add_input.setAttribute("name", "numb"); add_input.setAttribute("value", count); add_input.setAttribute("onchange", "changeSum(this)"); add_input.setAttribute("onkeyup", "changeSum(this)"); add_input.setAttribute("onmouseup", "changeSum(this)"); var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0]; var row = document.createElement("TR"); var td1 = document.createElement("TD"); td1.appendChild(document.createTextNode(name)); var td2 = document.createElement("TD"); td2.appendChild(add_input); var td3 = document.createElement("TD"); td3.appendChild(document.createTextNode(price)); var td4 = document.createElement("TD"); td4.appendChild(document.createTextNode(summa)); row.appendChild(td1); row.appendChild(td2); row.appendChild(td3); row.appendChild(td4); var td5 = document.createElement("TD"); row.appendChild(td5); td5.setAttribute('onmousedown', 'this.parentNode.parentNode.removeChild (this.parentNode);'); td5.innerHTML = "Удалить"; tbody.appendChild(row); } // пытался сделать функцию для изменения function changeSum(el) { var count = el.value; var priceElement = el.parentElement.nextSibling; var total = count*priceElement.innerText; var totalElement = priceElement.nextSibling; totalElement.innerText = total; } 
     #add { border: 1px solid black; width: 300px; height: 150px; } #btn { margin-left: 70px; margin-top: 10px; } #basketForm { border: 1px solid black; display: inline-block; } #basketTable tr+tr:hover { background: #f3bd48; /* Цвет фона при наведении */ color: #fff; /* Цвет текста при наведении */ } 
     Товары <form id="add"> <table> <tr> <td>Название товара: </td> <td> <select id="gds"> <option>Молоко</option> <option>Хлеб</option> <option>Сигареты</option> <option>Алкоголь</option> </select> </td> </tr> <tr> <td>Количество товара: </td> <td><input type="number" id="cnt" /></td> </tr> <tr> <td>Цена товара: </td> <td><input type="number" id="prc" /></td> </tr> </table> <input type="button" id="btn" onclick="addRow('basketTable')" value="Добавить в корзину" /> </form> <br /> <form id="basketForm"> <table id="basketTable" border="1"> <tr> <th>Товар</th> <th>Количество</th> <th>Цена</th> <th>Сумма</th> <th></th> </tr> </table> </form> 

       // Заменить строку: add_input.setAttribute("onchange", "changeSum(count, price)"); // на: add_input.setAttribute("oninput", "changeSum(this)"); // Функция для изменения function changeSum(obj) { let aTDs = obj.parentElement.parentElement.cells; aTDs[3].innerText = aTDs[2].innerText * obj.value; }