JavaScript 返回所有警报而不是一个。我该如何解决？

Question

所以，我正在尝试用 JS 稍微增强我的小费计算器应用程序。如果没有添加任何值(value)，我决定在每个表单下方添加一个警报，不幸的是它部分不起作用。我有 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

您正在为所有内容设置innerHTML。尝试在条件内设置它

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 更改为“请告诉我您的账单金额!”，并将 innerHTML 属性也更改为“请告诉我您的账单金额!”。换句话说，您的警报常量是不必要的，因为您的唯一目标是为某些情况设置innerHTML。这些情况由您的 if 逻辑表示。因此，将这些 innerHTML 语句移至条件逻辑并完全删除 const 变量是有意义的。此外，为了确保一次仅触发一个警报，我添加了 if else 逻辑。由于事件监听器函数的返回值并不重要，因此没有理由返回任何内容