Перейти к публикации

увеличение и уменьшение значения type number


Рекомендованные сообщения

Здравствуйте, у меня такая проблема, есть код, который увеличивает и уменьшает значение в input при нажатии определённой кнопки, вот только столкнулся с проблемой, если на уменьшение кнопка работает корректно, то кнопка, которая должна увеличивать, при нажатии просто делает значение максимальным. Не могу найти, где я ошибся, прошу помощи.. 

document.addEventListener('DOMContentLoaded', function () {

    if (document.querySelector('.number__but')) {


        let arrNuberCalc = document.querySelectorAll('.number__but');

        for(let i = 0; i < arrNuberCalc.length; i++) {
            mycalc(arrNuberCalc[i]);
        }

        function mycalc(nuberCalc) {
            let numberDown = nuberCalc.querySelector('.number__down'),
                numberUp = nuberCalc.querySelector('.number__up'),
                numberInp = nuberCalc.querySelector('[type="number"]'),
                min = numberInp.getAttribute('min'),
                max = numberInp.getAttribute('max'),
                step = numberInp.getAttribute('step');

            numberDown.addEventListener('click', function (e) {

                e = e || event;
                e.preventDefault();

                numberInp.focus();

                valueInp = numberInp.value || 0;

                if (!(min >= valueInp - step)) {
                    numberInp.value = (valueInp - step);
                } else {
                    numberInp.value = min;
                }
            })

            numberUp.addEventListener('click', function (e) {

                e = e || event;
                e.preventDefault();

                numberInp.focus();

                valueInp = numberInp.value || 0;

                if (!(max <= valueInp + step)) {
                    numberInp.value = (valueInp * 10 + step * 10) / 10;
                } else {
                    numberInp.value = max;
                }
            })
        }
    }
})

 

Ссылка на сообщение
Поделиться на других сайтах

Вам нужно выложить код вместе с разметкой. И делайте это в песочнице, чем такой простыней. Быстрее помогут.

Ссылка на сообщение
Поделиться на других сайтах
  • 4 недели спустя...

if (!(max <= valueInp + step))

А почему бы не писать это в виде max > valueInp + step?
Я бы предложил добавить строку debugger внутрь обработчика клика и посмотреть на значения всех переменных

if (!(min >= valueInp - step)) { numberInp.value = (valueInp - step); } else { numberInp.value = min };
А эту штуку можно записать как numberInp.value = Math.max(min, valueInp - step)

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

  • Статистика пользователей

    47 319
    Всего пользователей
    1 451
    Рекорд онлайна
    Mollykng
    Новый пользователь
    Mollykng
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...