@alannariya

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

есть два инпута, в которых стрелки по умолчанию я убрала и добавила кнопки. как из них выводить данные в реальном времени в другой 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;
}
  • Вопрос задан
  • 318 просмотров
Решения вопроса 1
@historydev Куратор тега JavaScript
Редактирую файлы с непонятными расширениями
<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;
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы