Изменения элемента суммы на View
Всем привет. Пользователь вносит сумму, из предложенных на экране монет. 1.2.5.10. При нажатии на 1 внесённая сумма увеличивается1. При нажатии на 2 внесённая сумма увеличивается на 2 и тд Если сумма превышает стоимость пользователь получает сдачу. Пользователь вносит сумму, покупает выбранный напиток. Как Мне передать сумму которую пользователь внес. Что сделал Я:
View
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
@foreach (var entity in Model)
{
var idButton+=1;
var buttonIncrease = increase + idButton;
<button id="buttonIncrease" name="increase" type="button" class="btn btn-primary">@entity.Cost</button>
}
@*test*@
<h2>внесенная сумма</h2>
<input type="text" name="field" value="0" />
@*test*@
Array.prototype.forEach.call(document.querySelectorAll('.increase'), function(v) {
v.addEventListener('click', inc);
});
function inc() {
var div = this.parentElement;
var input = div.children.item(1);
input.setAttribute('value', (parseInt(input.getAttribute('value')) + 5).toString());
}
Делаю на Asp.Net. Вот Мои попытки сделать. Оно то вроде и работает. Но не так как Мне хотелось. Прошу перейти и ознакомится с результатом по ссылки. Должны быть 4 кнопки. 1,2,5,10 и для всех нажатий одно поле суммы. и каждый раз к сумме прибавляется результат нажатия кнопки с нужным номиналом. https://jsfiddle.net/hdents7u/3/ |
Цитата:
|
Цитата:
Посмотрите пожалуйста по ссылке https://jsfiddle.net/j94fhmc6/2/ |
BorisJe,
во втором input что должно происходить? |
BorisJe, и я тебе макетик навоял... :D
<style>
.btn {
margin-bottom: 10px;
}
.btn button + button {
margin-left: 10px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
document.querySelectorAll('.btn').forEach(_ => {
const ot = _.parentNode.querySelector('.total')
_.addEventListener('click', _ => {
const o = _.target
if (o.tagName !== 'BUTTON') return
ot.value = +ot.value + +o.value
})
})
})
</script>
<div class='container'>
<div class='btn'>
<button value='1'>1</button>
<button value='2'>2</button>
<button value='5'>5</button>
<button value='10'>10</button>
</div>
<label>
Сумма
<input type='' class='total' />
</label>
</div>
|
Цитата:
|
Цитата:
<input type='' class='total' />Меняется. А если зайти Inspect то значение остается 0 |
BorisJe,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener('DOMContentLoaded', function() {
let sum = 0;
const field = document.querySelectorAll('[name="field"]');
document.querySelectorAll('.increase, .decrease').forEach(button => {
button.addEventListener('click', function() {
if(button.classList.contains('decrease')) sum = 0;
else sum += +button.textContent;
field.forEach(input => input.value = sum)
})
})
});
</script>
</head>
<body>
<div>
<button class="decrease" type="button">Обноления поля</button>
<input type="text" name="field" value="0" />
<button class="increase" type="button">1</button>
<button class="increase" type="button">2</button>
<button class="increase" type="button">5</button>
<button class="increase" type="button">10</button>
</div>
<div>
тут уже не работает
<input type="text" name="field" value="0" /> тут уже не работает
</div>
</body>
</html>
|
Цитата:
Я думал у тебя таких "секций" будет несколько... |
Цитата:
https://learn.javascript.ru/dom-attr...and-properties |
| Часовой пояс GMT +3, время: 22:55. |