How to calculate the grade the person received-CodePudding

I'm doing my Homework but I need help calculating the right way, the code I provided is what I have so far, and this is what my teacher requires: Create a webpage that contains the heading, Student Grades, and inputs a student's homework average, mid-term exam score, final exam score, and participation (all those grades will be entered as integers). Create a script that checks for valid input, i.e., that the input is between 0-100 and that, of course, the input are all numbers. If all input is valid then calculate and display the student's final average sorry for dumb question i started learning JS not to long ago

const answer = () => {
    let hwNum = document.querySelector('#hwAverage');
    let mtNum = document.querySelector('#midTerm');
    let feNum = document.querySelector('#finalExam');
    let partiNum = document.querySelector('#participation');
    let answer = document.querySelector('#result')

    n1 = Number(hwNum);
    n2 = Number(mtNum);
    n3 = Number(feNum);
    n4 = Number(partiNum);

    let result =   (.5 * n1)   (.2 * n2)   (.2 * n3)   (.1 * n4)

    answer.textContent = result
    return result
};

let submit = document.querySelector('#submit').addEventListener('click', function() { answer() } )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="part1.css">
    <script src="part1.js" defer></script>
    <title>part 1</title>
</head>
<body>
    <header>
        <h1>Part 1</h1>
    </header>
    <br>
    <label for="hwAvg"><b>Enter</b> Homework Average : </label>
    <input type="number" name="hwAverage" id="hwAverage" placeholder="Enter Number 0-100">
    <br>
    <label for="term"><b>Enter</b> Mid-term exam score : </label>
    <input type="number" name="midTerm" id="midTerm" placeholder="Enter Number 0-100">
    <br>
    <label for="exam"><b>Enter</b> Final exam score : </label>
    <input type="number" name="finalExam" id="finalExam" placeholder="Enter Number 0-100">
    <br>
    <label for="partic"><b>Enter</b> Participation : </label>
    <input type="number" name="participation" id="participation" placeholder="Enter Number 0-100">
    <br>
    <br>
    <input type="button" value="SUBMIT" id="submit" >
    <br>
    <br>
    <label for="resultLabel">Result : </label>
    <div  id="result"></div>
    <br>
    <br>

    <div >
        <div >
            <p>90-100  |  A</p>
        </div>
        <div >
            <p>80-89  |  B</p>
        </div>
        <div >
            <p>70-79  |  C</p>
        </div>
        <div >
            <p>60-69  |  D</p>
        </div>
        <div >
            <p>0-59  |  F</p>
        </div>
    </div>
</body>
</html>**strong text**

CodePudding user response：

Your solution is good.

If you want to get the data from a input element you have to use the value property. Example:

let hwNum = document.querySelector('#hwAverage').value;

But if you want to get a element for manipulate you don't use the value property. Example:

let answer = document.querySelector('#result');

Then if you want to set a data a input element you have to use the value property again. Example:

let hwNum = document.querySelector('#hwAverage');
hwNum.value = 'new value';

for anothers elements set value or data

let answer = document.querySelector('#result');
answer.textContent = 'new data o value';

CodePudding user response：

You need to get the value of following input fields. Try this.

let hwNum = document.querySelector('#hwAverage').value;
let mtNum = document.querySelector('#midTerm').value;
let feNum = document.querySelector('#finalExam').value;
let partiNum = document.querySelector('#participation').value;
let answer = document.querySelector('#result').value;