Показ следующего числа в зависимости от нажатой кнопки
Здравствуйте!
Сразу к сути, есть задача создать что-то вроде карусели. Как это должно работать: Есть две кнопки "Больше" и "Меньше". И дано 5 функций (в моём примере каждую функцию я заменю на числа 1,2,3,4,5). По умолчанию на экране есть эти две кнопки и цифра 1. При клике не кнопку "Больше", выполняется вторая функция (в нашем случае появляется цифра 2), далее, при очередном клике на "Больше" появляется цифра 3 и т.д. А если нажать на кнопку "Меньше", то число, соответственно, будет ниже. Чего только не перепробовал, и .toggle, и циклы - ничего не работает. Буду очень благодарен. |
<div>
<button id="prev"><</button>
<span>3</span>
<button id="next">></button>
</div>
<script>
document.querySelector('div').onclick = function(event) {
var maxValue = 5;
if (event.target.id === 'prev') {
var counter = event.target.nextElementSibling;
if (+counter.innerHTML > 0) {
counter.innerHTML--;
}
}
if (event.target.id === 'next') {
var counter = event.target.previousElementSibling;
if (+counter.innerHTML < maxValue) {
counter.innerHTML++;
}
}
}
</script>
|
| Часовой пояс GMT +3, время: 18:44. |