当我尝试使用input.value来取该项目的平均值时出现问题。无论我输入什么，Avarege 都会变成"0"

Question

我想做一个简单的页面，用户输入期中和期末分数，然后通过考试的结果。在没有任何帮助的情况下，我第一次自己编写了完整的代码，我认为它会工作，但它没有。

当我检查问题并试图修复它们时，我看到了每次我称之为0的输入值的平均值。

当我自己定义mid和final时，没有输入值，代码在控制台上工作。

我找不到数值和平均值的问题。

让我知道我的错误和误解在哪里关于DOM或其他东西，请。代码如下:

// definitions
let mid = document.querySelector("#midtermInp") // text input for midterm
let final = document.querySelector("#finalInp") // text input for final
let average = (mid.value * 0.4) + (final.value * 0.6)
let result = document.querySelector('#result')
let submitBtn = document.querySelector('#submitBtn')
// function
submitBtn.addEventListener('click', function(){
if (average >= 0 && average < 50) {
result.textContent = `Average: ${average} | FF - Failed`
}
else if (average >= 50 && average < 60) {
result.textContent = `Average: ${average} | FD - Failed`
}
else if (average >= 60 && average < 65) {
result.textContent = `Average: ${average} | DD - Conditional Pass`
}
else if (average >= 65 && average < 70) {
result.textContent = `Average: ${average} | DC - Conditional Pass`
}
else if (average >= 70 && average < 75) {
result.textContent = `Average: ${average} | CC - Passed!`
}
else if (average >= 75 && average < 80) {
result.textContent = `Average: ${average} | BC - Passed!`
}
else if (average >= 80 && average < 85) {
result.textContent = `Average: ${average} | BB - Passed!`
}
else if (average >= 85 && average < 90) {
result.textContent = `Average: ${average} | BA - Passed!`
}
else if (average >= 90 && average < 100) {
result.textContent = `Average: ${average} | AA - Passed!`
}
mid.value = ""
final.value = ""
})

Answer 1

问题是，当两个输入的值都为空时，您的代码只在文档加载后找到平均值。您需要将平均计算移动到按钮单击事件:

submitBtn.addEventListener('click', function(){
let average = (mid.value * 0.4) + (final.value * 0.6)