Math returning NaN to page-CodePudding

Hey guys I'm having trouble understanding where I've gone wrong, I'm assuming its within my maths but I can't see what it is that resulting in it not giving the correct answer

let input = Number(document.querySelector('.rep').value);
let btn = document.getElementById('submit');
let display = document.getElementById('1rm');


btn.addEventListener('click', function(ev) {
    let twentyPercent = Math.floor(input * 0.2);
    let max = Number(twentyPercent.value) * 100;
    display.textContent = Number(max.value);
    ev.preventDefault();
    return
});

<!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">
    <title>1 Rep Mac Calculator</title>
    <link href="1rm.css" rel="stylesheet">
    <script defer src="1rm.js"></script>
</head>
<body>
    <div id="title">
        <h1>1 Rep Max Calculator</h1>
    </div>

    <form id="repV">
        <input type="number" min="20" >
        <input type="submit" id="submit">
    </form>

    <div id="1rm-title">
        <h2>Your 1 rep max is:</h2>
    </div>

    <div id="1rm">
        <p>Text</p>
    </div>
</body>
</html>

CodePudding user response：

There was couple of errors in your code.

As stated in the comment section, your let input = Number(document.querySelector('.rep').value); needs to be inside your eventListener, because if declared in the global scope, as it was, it will automatically get the value when the page loads, which will be an empty string.

Second, in this line of code - let max = Number(twentyPercent.value) * 100; you tried to get .value property of the let variable which can't be done. It's not a DOM element, it's simply a JS variable. That's why max was shown as NaN.

Also, there is no need for return in eventListeners.

let btn = document.getElementById('submit');
let display = document.getElementById('1rm');

btn.addEventListener('click', function(ev) {
let input = Number(document.querySelector('.rep').value);
let twentyPercent = Math.floor(input * 0.2);
let max = twentyPercent * 100; //already a number, no need to parse it more
console.log(max, input, twentyPercent);
display.textContent = max;
ev.preventDefault();
});

<!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">
    <title>1 Rep Mac Calculator</title>
    <link href="1rm.css" rel="stylesheet">
    <script defer src="1rm.js"></script>
</head>
<body>
    <div id="title">
        <h1>1 Rep Max Calculator</h1>
    </div>

    <form id="repV">
        <input type="number" min="20" >
        <input type="submit" id="submit">
    </form>

    <div id="1rm-title">
        <h2>Your 1 rep max is:</h2>
    </div>

    <div id="1rm">
        <p>Text</p>
    </div>
</body>
</html>

CodePudding user response：

You can't use .value while defining the input variable to get its value outside the function because then you can't get the current value of it, however you can get the input itself and then get its value anytime you wanted its value in your function. and you don't need to call .value on the calculation variables like twentyPercent.value and max.value because they are already holding the value itself. also there is no need for Number(...) on all variables when they are all holding numbers and also JavaScript parses String to Number if it can be used as Number, lastly I also used a plus sign before getting the value of the input here let value = input.value; as it is the shortcut for parsing values to number

let input = document.querySelector('.rep');
let btn = document.getElementById('submit');
let display = document.getElementById('1rm');


btn.addEventListener('click', function (ev) {

    // getting the value of the input
    let value =  input.value;

    // calculating with the value of the input
    let twentyPercent = Math.floor(value * 0.2);

    // calculating max value
    let max = twentyPercent * 100;

    // displaying the value
    display.textContent = max;
    
    ev.preventDefault();
    return
});