Как вывести данные в реальном времени из input type=number?

Question

[alannariya]

есть два инпута, в которых стрелки по умолчанию я убрала и добавила кнопки. как из них выводить данные в реальном времени в другой div, так, чтобы затем полученные цифры я могла использовать для подсчета total?
Отсюда беру

<div>
							<div class="input-number input1">
								<button class="style_pm" type="button" onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange(); ">-</button>
								<input class="style_input I-1" id="I1" type="number" min="0" value="0"  readonly oninput="snd('I1 , B1')">
								<button class="style_pm" type="button" onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.onchange();">+</button>
							</div><br>
							<div class="input-number">
								<button class="style_pm" type="button" onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange();">-</button>
								<input class="style_input I-2" id="I2" type="number" min="0"  readonly>
								<button class="style_pm" type="button" onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.onchange();">+</button>
							</div>

И сюда вставляю

<div class="total">
				<div class="estimation">
					<div><span id="B1"></span>Basic (20 €)<br>
						<span id="S1"></span>Senior (10 €)</div> 
					<div><span id="sum1"></span><br> <span id="sum2"></span></div> 
				</div>
				<div class="estimation_total">Total: <span id="TOTAL"></span></div>
			</div>

Стили

input[id="I1"], input[id="I2"] 
{
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield;
}
 
input[id="I1"]::-webkit-outer-spin-button,
input[id="I2"]::-webkit-outer-spin-button,
input[id="I1"]::-webkit-inner-spin-button,
input[id="I2"]::-webkit-inner-spin-button 
{
	display: none;
}

.input1
{
	margin-top: 20px;
}

.style_input {
	background: var(--white);
	width: 40px;
	height: 25px;
	border: none;
	text-align: center;
	font-size: 18px;
	font-weight: 400;
	padding-left: 0 0 0 10px;
}

.style_pm {
	width: 40px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
	background-color: black;
  color: white;
  font-size: 25px;
  font-weight: 300;
}

Comments

[historydev]

В будущем заливайте сразу на jsfiddle или codepen, следом вынесите все свои onclick в отдельный файл js и используйте addEventListener или просто onclick к нужному элементу. Для поиска используйте document.querySelector('myButton'). Как сделаете, ответьте на комментарий ссылкой на песочницу.

[alannariya]

Владимир, доброе утро! прошу прощения, за то что выложила изначально неудобно, я новичок и учусь на ходу.
Добавила весь код с некоторым описанием для объяснения сюда https://codepen.io/alannariya/pen/PoegrOK?editors=1111
возможно, мои вопросы могут показаться вам тупыми, поэтому заранее извиняюсь и спасибо за любую помощь.

[historydev]

alannariya, Доброе. Сейчас посмотрим что вы там наколдовали)

[historydev]

alannariya, такс, чего вы хотите добиться всем этим? Какой функционал необходим?

[Noder SS]

Как я понял, попросту повесить обработчик на кнопку и вывести значение инпута?

Answer 1

[historydev]

<div>
	<div class="input-number input1">

    <button class="style_pm BTN-M" type="button">-</button>

    <input class="style_input I-1" id="I1" type="number" min="0" value="2" readonly>

    <button class="style_pm BTN-P" type="button">+</button>
  </div>
  <br>
</div>

<div class="total">
	<div class="estimation">
	<div>
    <span id="B1">2</span>- Basic (20 €)<br>
	  <span id="S1">1</span>- Senior (10 €)
    </div> 
	<div>
    <span id="sum1">40 €</span><br> 
    <span id="sum2"></span> 10 €</div> 
 </div>
 <div class="estimation_total">Total: 
   <span id="TOTAL"> 50 €</span>
   </div>
</div>

const input1 = document.querySelector('#I1'); // Получаем input
const btn_plus1 = document.querySelector('.BTN-P'); // Получаем кнопку плюс
const btn_minus1 = document.querySelector('.BTN-M'); // Получаем кнопку минус 
const span1 = document.querySelector('#B1');

// Свойства nextElementSibling и prevousElementSibling здесь не нужны

btn_minus1.addEventListener('click', () => {
  input1.stepDown(4); // Отнимаем 1 или указанное число (измените на 1)
	span1.textContent = input1.value;
});

btn_plus1.addEventListener('click', () => {
  input1.stepUp(8); // Прибавляем 1 или указанное число (измените на 1)
  span1.textContent = input1.value;
});

Comments

[alannariya]

Огромное спасибо вам за помощь! И отдельная благодарность за комментарии!
Если я сейчас хочу посчитать произведение числа полученного в #B1 на "стоимость", я могу продолжать писать здесь же, только добавить в константу число на которое хочу умножать? или мне отдельную запись заводить?

[alannariya]

Добавила пару строчек, но не работает, в консоль выводит Nan.
Я неверно преобразую span?

var span1_number = parseInt(span1);
var total1 = document.querySelector('#sum1');

 total1 = ( span1_number * 20 );
 console.log( span1_number * 20 );

[historydev]

alannariya, вы преобразуете элемент, а нужно то, что внутри span