Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменения элемента суммы на View (https://javascript.ru/forum/dom-window/83420-izmeneniya-ehlementa-summy-na-view.html)

BorisJe 03.12.2021 15:31

Изменения элемента суммы на 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/

ksa 03.12.2021 15:54

Цитата:

Сообщение от BorisJe
Должны быть 4 кнопки. 1,2,5,10

Так у тебя таких кнопок нет. :no:

BorisJe 03.12.2021 16:08

Цитата:

Сообщение от ksa (Сообщение 542068)
Так у тебя таких кнопок нет. :no:

Добавил.

Посмотрите пожалуйста по ссылке
https://jsfiddle.net/j94fhmc6/2/

рони 03.12.2021 16:13

BorisJe,
во втором input что должно происходить?

ksa 03.12.2021 16:14

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>

BorisJe 03.12.2021 16:17

Цитата:

Сообщение от рони (Сообщение 542070)
BorisJe,
во втором input что должно происходить?

Я хочу чтобы во второй input приходила сумма в зависимости от нажатия

BorisJe 03.12.2021 16:19

Цитата:

Сообщение от ksa (Сообщение 542071)
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>

То что и хотел, а Я могу обратится к Button по ид из Js? И на форме
<input type='' class='total' />
Меняется. А если зайти Inspect то значение остается 0

рони 03.12.2021 16:23

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>

ksa 03.12.2021 16:35

Цитата:

Сообщение от BorisJe
а Я могу обратится к Button по ид из Js?

Напишешь ему ИД - сможешь обращаться по ИД. :yes:
Я думал у тебя таких "секций" будет несколько...

ksa 03.12.2021 16:37

Цитата:

Сообщение от BorisJe
А если зайти Inspect то значение остается 0

Так ты не путай атрибут и свойство ДОМ-элемента... ;)
https://learn.javascript.ru/dom-attr...and-properties


Часовой пояс GMT +3, время: 17:40.