Форум

BorisJe · #1 (**permalink**) 03.12.2021, 15:31

Всем привет. Пользователь вносит сумму, из предложенных на экране монет. 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 · #2 (**permalink**) 03.12.2021, 15:54

Сообщение от BorisJe

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

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

BorisJe · #3 (**permalink**) 03.12.2021, 16:08

Сообщение от ksa

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

Добавил.

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

рони · #4 (**permalink**) 03.12.2021, 16:13

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

ksa · #5 (**permalink**) 03.12.2021, 16:14

BorisJe, и я тебе макетик навоял...

<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 · #6 (**permalink**) 03.12.2021, 16:17

Сообщение от рони

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

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

BorisJe · #7 (**permalink**) 03.12.2021, 16:19

Сообщение от ksa

BorisJe, и я тебе макетик навоял...

<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

рони · #8 (**permalink**) 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 · #9 (**permalink**) 03.12.2021, 16:35

Сообщение от BorisJe

а Я могу обратится к Button по ид из Js?

Напишешь ему ИД - сможешь обращаться по ИД.

Я думал у тебя таких "секций" будет несколько...

ksa · #10 (**permalink**) 03.12.2021, 16:37

Сообщение от BorisJe

А если зайти Inspect то значение остается 0

Так ты не путай атрибут и свойство ДОМ-элемента...

https://learn.javascript.ru/dom-attr...and-properties

Форум

Справочник

Discord чат

Курсы javascript