@WillieShibelgut

Как оптимизировать код изменения текста после клика на кнопку?

Добрый день. На сайте необходимо реализовать механизм: по клике на кнопки + и - прибавляется и отнимается цена. Причём шаг цены может быть неравномерным.
Я написал скрипт, насколько хватило моего опыта, он полностью работает как мне нужно, но мне он кажется очень громоздким и неоптимизированным. Подскажите пожалуйста, как сделать его красивее, буду благодарен даже не за готовый код, а просто за ход мысли :)

Мой код:
function plusPrice() {
                plus.addEventListener('click', (e) => {
                e.preventDefault();
                person.value++;
                if (person.value >= 10) {
                    person.value = 10;
                }
                if (person.value == 2) {
                    price.textContent = `245 000 ₸`;
                }
                if (person.value == 3) {
                    price.textContent = `240 000 ₸`;
                }
                if (person.value == 4) {
                    price.textContent = `238 000 ₸`;
                }
                if (person.value == 5) {
                    price.textContent = `235 000 ₸`;
                }
                if (person.value == 6) {
                    price.textContent = `230 000 ₸`;
                }
                if (person.value == 7) {
                    price.textContent = `225 000 ₸`;
                }
                if (person.value == 8) {
                    price.textContent = `220 000 ₸`;
                }
                if (person.value == 9) {
                    price.textContent = `215 000 ₸`;
                }
            });            
            }
            plusPrice();


Такой же код и при клике на кнопку минус.

60c331fcd0b11017653630.png
  • Вопрос задан
  • 50 просмотров
Решения вопроса 2
sergiks
@sergiks Куратор тега JavaScript
♬♬
let quantity = 1; // изначально 1

// цены в тыс. для числа-индекса (считается от 0: 0, 1, 2, ... 9)
const prices = [0, 250, 245, 240, 238, 235, 230, 225, 220, 215]; // 1..9

// клик на плюс
plus.addEventListener('click', (e) => {
  e.preventDefault();
  fixPrice(+1);
});

// клик на минус
minus.addEventListener('click', (e) => {
  e.preventDefault();
  fixPrice(-1);
});

// пересчет цены
const fixPrice = (delta) => {
  // обновить количество
  quantity += delta; // +/- 1
  quantity = Math.max(1, quantity); // не меньше 1
  quantity = Math.min(9, quantity); // не больше 9

  // показать новые значения
  person.value = quantity; // показать новое число персон
  price.textContent = `${prices[quantity]} 000 ₸`; // показать цену
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы