Как сделать, чтобы количество элементов не становилось меньше нуля?
Всем привет. Я только учусь. Подскажите пожалуйста. Есть две кнопки + и -. Как сделать так, чтобы количество элементов не становилось меньше нуля и так же сделать и в большую сторону до 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; } } |
Mike23,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
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; } |
<input type="number" min="0" max="5" value="0">Без js :dance: |
Цитата:
|
Вариант :)
<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> |
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> |
рони,
:dance: |
А ручной ввод почему не проверяется, можно же и меньше нуля, и буквы ввести.
|
Цитата:
<!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> |
Часовой пояс GMT +3, время: 19:55. |