JavaScript возвращает все оповещения вместо одного. Как я могу это исправить?

Question

Итак, я пытаюсь улучшить приложение калькулятора чаевых за JS. Я решил добавить предупреждение под каждой формой, если нет добавленной стоимости, и, к сожалению, она частично не работает. У меня есть 3 формы (сумма счета, выбор типа чаевых, которые пользователь хочет дать в процентах, и сколько людей делятся счетами. Проблема в том, что JS запускает все три оповещения, несмотря на отсутствие только одного или двух значений. Кроме того, мне интересно, как можно избавиться от предупреждений, поскольку они остаются даже после добавления всех значений в калькулятор.Это работало до добавления alert1, alert2 и alert3.

const calculateTip =() => {
    const cost = document.querySelector('.amount').value;
    const service = document.querySelector('.service').value;
    const people = document.querySelector('.numOfPeo').value;
    const alert1 = document.querySelector('#alert-1').innerHTML = "Please tell me amount of your bill!"
    const alert2 = document.querySelector('#alert-2').innerHTML = "Please tell me how your service was!"
    const alert3 = document.querySelector('#alert-3').innerHTML = "Please tell me how many people are sharing!"

    if (cost === "") {
        alert1
    }

    if (service === 0) {
        return alert2
    }

    if (people === "" || people <= 1) {
        return alert3
    }

    const tip = cost * service / 100;
    const total = tip / people;

    document.getElementById('totalTip').style.display = "block";
    document.getElementById('tip').innerHTML = total;
}

btn.addEventListener('click', calculateTip);

Answer 1

вы устанавливаете внутренний HTML для всего. попробуйте установить его в условном

const cost = document.querySelector('.amount').value;
const service = document.querySelector('.service').value;
const people = document.querySelector('.numOfPeo').value;

if (cost === "") {
    document.querySelector('#alert-1').innerHTML = "Please tell me amount of your bill!"
} else if (service === 0) {
    document.querySelector('#alert-2').innerHTML = "Please tell me how your service was!"
} else if (people === "" || people <= 1) {
    document.querySelector('#alert-3').innerHTML = "Please tell me how many people are sharing!"
}

const tip = cost * service / 100;
const total = tip / people;

document.getElementById('totalTip').style.display = "block";
document.getElementById('tip').innerHTML = total;

Когда вы кодируете const alert1 = document.querySelector('#alert-1').innerHTML = "Please tell me amount of your bill!", на самом деле вы устанавливаете alert1 в "Please tell me amount of your bill!", а атрибут innerHTML также в "Please tell me amount of your bill!". Другими словами, ваши константы оповещения не нужны, поскольку ваша единственная цель - установить внутренний HTML для определенных случаев. Эти случаи представлены вашим if logi c. Поэтому имеет смысл перенести эти innerHTML операторы в ваши условные логики c и полностью удалить ваши константные переменные. Кроме того, чтобы убедиться, что одновременно срабатывает только одно предупреждение, я добавил if else logi c. А поскольку возвращаемое значение нашей функции прослушивания событий не имеет значения, то нет никаких оснований для return что-либо