0

введите сюда описание изображения Нужно что бы верхняя стрелка меняла значение в input на +1, а нижняя на -1. минимальное значение было 0, а максимальное 9. помогите пожалуйста пример

<ul class="test">
  <li class="entering-numbers">
    <div class="arrow-up"></div>
    <div class="arrow-down"></div>
    <input type="text" value="4" readonly>
    <label> 123</label>
  </li>
</ul>
0

1 ответ 1

0

var input = document.getElementById('input');
var up = document.getElementById('up');
var down = document.getElementById('down');

function isValid(n) {
	let min = 0;
	let max = 9;
    if (n >= min && n <= max) {
    	return true;
    }
    return false;
}

up.addEventListener('click', function(e){
	let n = parseInt(input.value);
    ++n;
	let val = isValid(n);
	if(!!val) {
		input.value = n;
	    console.log("Inc: %d", n);
    }
});

down.addEventListener('click', function(e){
	let n = parseInt(input.value);
    --n;
	let val = isValid(n);
	if(!!val) {
		input.value = n;
	    console.log("Dec: %d", n);
    }
});
.entering-numbers > input {
	width: 15px;
	float: left;
	display: inline-block;
	margin: 0 10px 40px 0;
	height: 15px;
	text-align: center;
	background-color: #efbd16;
	border-radius: 2px;
	border: none;
	color: #1c1c1c;
	font-family: GothamPro;
	font-size: 12px;
	font-weight: 500;
} .entering-numbers > label:after {
	display: none;
}
.entering-numbers > label:befor {
	display: none;
}

.arrow-up {
	cursor: pointer;
	position: absolute;
	    top: 4px;
    left: 49px;
	width: 0;
	height: 0;
	border-left: 7.5px solid transparent;
  border-right: 7.5px solid transparent;
  border-bottom: 9px solid #efbd16;
}
.arrow-down {
	cursor: pointer;
	position: absolute;
	    top: 36px;
    left: 49px;
	width: 0;
	height: 0;
	border-left: 7.5px solid transparent;
  border-right: 7.5px solid transparent;
  border-top: 9px solid #efbd16;
}
<ul class="test">
  <li class="entering-numbers">
    <div class="arrow-up" id="up"></div>
    <div class="arrow-down" id="down"></div>
    <input type="text" value="4" id="input" readonly>
    <label> 123</label>
  </li>
</ul>

3
  • огромное спасибо и вам)
    – mars
    23 янв 2017 в 17:45
  • подскажите пожалуйста еще, а если таких input со стрелками несколько на странице. этот код тогда не работает. как такое реализовать?
    – mars
    23 янв 2017 в 18:39
  • Использовать не id, а другой селектор. Например data-id. 23 янв 2017 в 21:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.