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