There is a problem when i try to use input.value for taking average in this project. Avarege turns &-CodePudding

I'm trying to make a simple page that the user enters midterm and final marks then takes the result of pass stuation about exams. I writed whole codes without any help and on my own first time, I thought It will work, but it doesn't.

When I check the problems and try to fix them I've seen the average of the values of the inputs that I called are turns 0 everytime.

When I define mid and final by myself, without the input values, code works on console.

I can't found the problem about the values and averages.

Let me know where are my mistakes and misunderstoods about DOM or other stuff, please. Here the codes:

 // 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 = ""
})

CodePudding user response：

The problem is that your code is only finding the average value right after the document loads, when the value of both inputs is blank. You need to move the average calculation to the button click event:

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