Форум

Mike23 · #1 (**permalink**) 02.01.2019, 16:36

Всем привет. Я только учусь. Подскажите пожалуйста. Есть две кнопки + и -. Как сделать так, чтобы количество элементов не становилось меньше нуля и так же сделать и в большую сторону до 5?

var elem = document.querySelector('.elem');
var buttonPlus = document.querySelector('.button_plus');
var buttonMinus = document.querySelector('.button_minus');

buttonPlus.addEventListener('click', addElem);
buttonMinus.addEventListener('click', removeElem);

function addElem() {
  elem.innerHTML = parseInt(elem.innerHTML) + 1;
  if (elem.innerHTML == 5) {
    
  }
}

function removeElem() {
  elem.innerHTML = parseInt(elem.innerHTML) - 1;
  if (elem.innerHTML == 0) {
    elem.innerHTML = 0;
  }
}

рони · #2 (**permalink**) 02.01.2019, 17:07

Mike23,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 02.01.2019, 17:07

Mike23,

var elem = document.querySelector('.elem');
 var buttonPlus = document.querySelector('.button_plus');
 var buttonMinus = document.querySelector('.button_minus');
 var num = 0, max = 5, min = 0;
 //var num = +elem.innerHTML;

 buttonPlus.addEventListener('click', addElem);
 buttonMinus.addEventListener('click', removeElem);

 function addElem() {
 num = Math.min(++num, max)
 elem.innerHTML = num;
 }

 function removeElem() {
 num = Math.max(--num, min)
 elem.innerHTML = num;
}

Vlasenko Fedor · #4 (**permalink**) 02.01.2019, 17:31

<input type="number" min="0" max="5" value="0">

Без js

Mike23 · #5 (**permalink**) 02.01.2019, 17:45

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

Mike23,

var elem = document.querySelector('.elem');
 var buttonPlus = document.querySelector('.button_plus');
 var buttonMinus = document.querySelector('.button_minus');
 var num = 0, max = 5, min = 0;
 //var num = +elem.innerHTML;

 buttonPlus.addEventListener('click', addElem);
 buttonMinus.addEventListener('click', removeElem);

 function addElem() {
 num = Math.min(++num, max)
 elem.innerHTML = num;
 }

 function removeElem() {
 num = Math.max(--num, min)
 elem.innerHTML = num;
}

Спасибо большое!

Vlasenko Fedor · #6 (**permalink**) 02.01.2019, 18:55

Вариант

<style>
.podbor {
  position: relative;
}
.podbor>input {
  padding: 2px 2px 1px 4px;
  font-size: 30px;
  width: 70px;
  height: 40px;
  float: left;
  border: 1px solid #666;
  border-radius: 4px 0 0 4px;
}
.podbor>span {
  display: block;
  font-size: 18px;
  position: absolute;
  left: 58px;
  margin: 0;
  padding: 2px;
  line-height: 14px;
  width: 14px;
  border: 1px solid #666;
  background-color: #E4E4E4;
  text-align: center;
  cursor: pointer;
}
.podbor>.plus {
  border-bottom: none;
  height: 16px;
}
.podbor>.minus {
  top: 20px;
  height: 14px;
}
.podbor>span:hover {
  background-color: #999;
}
.clear {
  clear: both;
}
</style>
<div class="clear"></div>
<div class="podbor" data-min="0" data-max="5">
  <input type="text" value="1"/>
  <span class="plus">+</span>
  <span class="minus">-</span>
</div>
<div class="clear"></div>
<hr>
<div class="clear"></div>
<div class="podbor" data-min="3" data-max="8">
  <input type="text" value="3" />
  <span class="plus">+</span>
  <span class="minus">-</span>
</div>
<script>
(_ => {
  [...document.querySelectorAll('.podbor')].forEach(el => el.onclick = ({target, currentTarget}) => {
    if (target.tagName !== "SPAN") return;
    let inp = currentTarget.childNodes[1], val = +inp.value || +currentTarget.dataset.min || 0;
    inp.value = val + {minus: val > +currentTarget.dataset.min ? -1 : 0, plus: val < +currentTarget.dataset.max ? 1: 0}[target.className];
  });
})();
</script>

рони · #7 (**permalink**) 02.01.2019, 20:17

Poznakomlus,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<style>
.podbor {
  position: relative;
}
.podbor>input {
  padding: 2px 2px 1px 4px;
  font-size: 30px;
  width: 70px;
  height: 40px;
  float: left;
  border: 1px solid #666;
  border-radius: 4px 0 0 4px;
}
.podbor>span {
  display: block;
  font-size: 18px;
  position: absolute;
  left: 58px;
  margin: 0;
  padding: 2px;
  line-height: 14px;
  width: 14px;
  border: 1px solid #666;
  background-color: #E4E4E4;
  text-align: center;
  cursor: pointer;
}
.podbor>.plus {
  border-bottom: none;
  height: 18px;
}
.podbor>.minus {
  top: 23px;
  height: 16px;
}
.podbor>span:hover {
  background-color: #999;
}
.clear {
  clear: both;
}
</style>
<div class="clear"></div>
<div class="podbor" data-min="0" data-max="5">
  <input type="text" value="1"/>
  <span class="plus">+</span>
  <span class="minus">-</span>
</div>
<div class="clear"></div>
<hr>
<div class="clear"></div>
<div class="podbor" data-min="3" data-max="8">
  <input type="text" value="3" />
  <span class="plus">+</span>
  <span class="minus">-</span>
</div>
<script>
(_ => {
  [...document.querySelectorAll('.podbor')].forEach(el => {
   let inp = el.querySelector('input'), {min,max} = el.dataset;
   el.onclick = ({target}) => {
    if (target.tagName !== "SPAN") return;
    target.closest(".minus") ? --inp.value : ++inp.value;
    inp.value = Math.max(min, Math.min(+inp.value, max));
  }});
})();
</script>

</body>
</html>

Vlasenko Fedor · #8 (**permalink**) 02.01.2019, 22:11

рони,

laimas · #9 (**permalink**) 03.01.2019, 06:29

А ручной ввод почему не проверяется, можно же и меньше нуля, и буквы ввести.

Malleys · #10 (**permalink**) 03.01.2019, 16:02

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

А ручной ввод почему не проверяется, можно же и меньше нуля, и буквы ввести.

Он всё-равно не проходит проверку.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
	
		input[type="number"] {
			font-size: 400%;
			border: 1px solid #aaa;
			border-radius: .1em;
			background: hsl(var(--hue), 100%, 95%);
			border-color: hsl(var(--hue), 100%, 50%);
		}
		
		input[type="number"]:valid {
			--hue: 120;
		}
		
		input[type="number"]:invalid {
			--hue: 0;
		}
		
		input[type="number"]::-webkit-inner-spin-button {
			margin-right: .1em;
			opacity: 1;
			-webkit-appearance: none;
			background:
				url('data:image/svg+xml,\
				<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200">\
					<style>\
						text { font: 100px monospace; pointer-events: none; }\
						rect { width: 98px; height: 98px; fill: %23eee; fill-opacity: .75;\
						stroke-opacity: .75; stroke: black; stroke-width: 2px; x:1.5px; }\
						rect:hover { fill: %23bbb; }\
					<%2fstyle>\
					<rect y="1.5"/><rect y="100"/>\
					<text x="20" y="75">+</text>\
					<text x="20" y="175">-</text>\
				</svg>')
				no-repeat
				center / contain
			;
			width: .5em;
		}
		
	</style>
</head>
<body>
	<input type="number" min="0" max="5" step="1" value="0">
	<input type="number" min="0" max="5" step="1" value="0">
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript