Как сократить код?

Question

[Александра]

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

let persons = document.querySelectorAll(".counter-block-input")[0],
        restDays = document.querySelectorAll(".counter-block-input")[1],
        place = document.getElementById("select"),
        totalValue = document.getElementById("total"),
        personsSum = 0,
        daysSum = 0,
        total = 0;
        
        
        totalValue.textContent = 0;

        persons.addEventListener("change", function() {
            personsSum = +this.value;
            total = (daysSum + personsSum) * 4000;

            if (restDays.value == "") {
                totalValue.textContent = 0;
            } else {
                totalValue.textContent = total; 
            }
        });

        restDays.addEventListener("change", function() {
            daysSum = +this.value;
            total = (daysSum + personsSum) * 4000;

            if (persons.value == "") {
                totalValue.textContent = 0;
            } else {
                totalValue.textContent = total; 
            }
        });
        
        place.addEventListener("change", function() {
            if (restDays.value == "" || persons.value == "") {
                totalValue.textContent = 0;
            } else {
                let a = total;
                totalValue.textContent = a * this.options[this.selectedIndex].value;
            }
        });

        persons.addEventListener("change", function() {
            if (restDays.value == "" || restDays.value == 0 || persons.value == "" || persons.value == 0) {
                totalValue.textContent = 0;
            }
        });

        restDays.addEventListener("change", function() {
            if (restDays.value == "" || restDays.value == 0 || persons.value == "" || persons.value == 0) {
                totalValue.textContent = 0;
            }
        });

});

Comments

[alex-1917]

этот код заполонил весь гугл. зачет сдаете что ли?

Answer 1

[Владимир Проскурин]

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

const persons = document.querySelectorAll(".counter-block-input")[0];
const restDays = document.querySelectorAll(".counter-block-input")[1];
const place = document.getElementById("select");
const totalValue = document.getElementById("total");

function calculateTotal() {
    const personsSum = +persons.value || 0;
    const daysSum = +restDays.value || 0;
    const placeIndex = place.selectedIndex;

    const total = (daysSum + personsSum) * place.options[placeIndex].value * 4000;

    totalValue.textContent = total;
}

persons.addEventListener("change", calculateTotal);
restDays.addEventListener("change", calculateTotal);
place.addEventListener("change", calculateTotal);
calculateTotal(); // сразу вызываем, чтобы обнулить поле

Comments

[MarvinJan]

Выглядит достойно. Только, если не секрет, зачем нам именно суммы дней и человек, если там одно значение? Почему не просто personsSum = persons.value || 0

[Владимир Проскурин]

MarvinJan, я без контекста писал названия переменных, ориентируясь на названия полей persons, restDays. В personsSum хранится значение из поля persons, плюсик там для приведения к числовому типу. Так что получается также, как вы написали, только можно поменять название переменной на personsNum или personsCount.

Answer 2

[Рональд Макдональд]

Ну вот это:

if (persons.value == "") {
                totalValue.textContent = 0;
            } else {
                totalValue.textContent = total; 
            }

можно заменить на тернарный оператор и вообще вынести в отдельную функцию. Это тоже:

persons.addEventListener("change", function() {
            if (restDays.value == "" || restDays.value == 0 || persons.value == "" || persons.value == 0) {
                totalValue.textContent = 0;
            }
        });

Comments

[Александра]

Так я и делала в самом начале. Но смысл в том, что вылезает ошибка, если данные снова поменять - сумма не меняется.

[Рональд Макдональд]

Александра, сделайте снова и покажите код, поищем ошибку.

[Александра]

Рональд Макдональд, Спасибо, попробовала ещё раз, получилось.