Я хотел бы обновить значения в таблице непосредственно ниже формы, которую у меня есть. Количества в тележке увеличены и уменьшены, а значение в таблице ниже должно соответствовать. В тот момент, когда увеличение/уменьшение работает для поля ввода для формы, но я не могу получить никаких изменений в поле таблицы.Обновление значения таблицы JS onchange
JS для формы полевого
/* Input incrementer*/
$(".numbers-row").append('<div class="inc button_inc">+</div><div class="dec button_inc">-</div>');
$(".button_inc").on("click", function() {
var $button = $(this);
var oldValue = $button.parent().find("input").val();
if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
}
$button.parent().find("input").val(newVal);
});
});
HTML -
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Adults</label>
<div class="numbers-row">
<input type="text" value="1" id="adult" onchange="myFunction()" class="qty2 form-control" name="quantity">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Children</label>
<div class="numbers-row">
<input type="text" value="0" id="child" class="qty2 form-control" name="quantity">
</div>
</div>
</div>
</div>
<br>
<table class="table table_summary">
<tbody>
<tr>
<td>
Adults
</td>
<script>
function myFunction() {
var x = document.getElementById("adult").value;
document.getElementById("adultvalue").innerHTML = "£" + x;
}
</script>
<td class="text-right">
<p id="adultvalue">2</p>
</td>
</tr>
<tr>
<td>
Children
</td>
<td class="text-right">
0
</td>
</tr>
<tr>
<td>
Total amount
</td>
<td class="text-right">
3x £52
</td>
</tr>
<tr class="total">
<td>
Total cost
</td>
<td class="text-right">
£154
</td>
</tr>