Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.12.2021, 15:31
Аспирант
Отправить личное сообщение для BorisJe Посмотреть профиль Найти все сообщения от BorisJe
 
Регистрация: 03.12.2021
Сообщений: 66

Изменения элемента суммы на 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/
Ответить с цитированием
  #2 (permalink)  
Старый 03.12.2021, 15:54
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от BorisJe
Должны быть 4 кнопки. 1,2,5,10
Так у тебя таких кнопок нет.
Ответить с цитированием
  #3 (permalink)  
Старый 03.12.2021, 16:08
Аспирант
Отправить личное сообщение для BorisJe Посмотреть профиль Найти все сообщения от BorisJe
 
Регистрация: 03.12.2021
Сообщений: 66

Сообщение от ksa Посмотреть сообщение
Так у тебя таких кнопок нет.
Добавил.

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

Последний раз редактировалось BorisJe, 03.12.2021 в 16:13.
Ответить с цитированием
  #4 (permalink)  
Старый 03.12.2021, 16:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

BorisJe,
во втором input что должно происходить?
Ответить с цитированием
  #5 (permalink)  
Старый 03.12.2021, 16:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

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>
Ответить с цитированием
  #6 (permalink)  
Старый 03.12.2021, 16:17
Аспирант
Отправить личное сообщение для BorisJe Посмотреть профиль Найти все сообщения от BorisJe
 
Регистрация: 03.12.2021
Сообщений: 66

Сообщение от рони Посмотреть сообщение
BorisJe,
во втором input что должно происходить?
Я хочу чтобы во второй input приходила сумма в зависимости от нажатия

Последний раз редактировалось BorisJe, 03.12.2021 в 16:20.
Ответить с цитированием
  #7 (permalink)  
Старый 03.12.2021, 16:19
Аспирант
Отправить личное сообщение для BorisJe Посмотреть профиль Найти все сообщения от BorisJe
 
Регистрация: 03.12.2021
Сообщений: 66

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

Последний раз редактировалось BorisJe, 03.12.2021 в 16:23.
Ответить с цитированием
  #8 (permalink)  
Старый 03.12.2021, 16:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #9 (permalink)  
Старый 03.12.2021, 16:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от BorisJe
а Я могу обратится к Button по ид из Js?
Напишешь ему ИД - сможешь обращаться по ИД.
Я думал у тебя таких "секций" будет несколько...
Ответить с цитированием
  #10 (permalink)  
Старый 03.12.2021, 16:37
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от BorisJe
А если зайти Inspect то значение остается 0
Так ты не путай атрибут и свойство ДОМ-элемента...
https://learn.javascript.ru/dom-attr...and-properties
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отследить изменения класса "еще не существующего" элемента hitori Events/DOM/Window 1 05.11.2014 05:34
Как сохранить обработчики элемента, при изменения положения элемента в dom-дереве ? Danxil Events/DOM/Window 5 08.11.2013 23:33
Отлов изменения размера элемента. Какие способы есть? danik.js Events/DOM/Window 3 05.02.2013 11:00
Событие изменения элемента trikadin Events/DOM/Window 2 13.06.2011 23:02
Событие изменения размера элемента <div>, <td> javascripter Events/DOM/Window 10 01.03.2011 03:33