Есть 2 таблицы:Товары и корзина
При нажатии на кнопку "Добавить товар" добавляется запись во вторую таблицу. Так же, в корзине мы можем изменить "Количество", тогда должна тут же меняться "Сумма", именно этот момент и не получается реализовать
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>