Getting NaN after doing some js math-CodePudding

I am making a dieting points calculator with the (very, very limited) js knowledge I have, but for whatever reason, I can't get my second group of functions to return a number (Instead returns NaN). A user will click one button out of a group of 3, and then repeat with another group. each button will call its own button group. The first group works fine, but the second group doesn't. Any help would be greatly appreciated. Here is my 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>Document</title>
</head>
<body>
    <p id="step1">Step 1</p>
    <button onclick="Male()">Male</button>
    <button onclick="Female()">Female</button>
    <button onclick="Other()">Other</button>
    <p id="step2">Step 2</p>
    <button onclick="seventeen()">17</button>
    <button onclick="twentyseven()">27</button>
    <button onclick="thirtyeight()">38</button>
    <button onclick="fortyeight()">48</button>
    <button onclick="fiftyeight()">58</button>
</body>
</html>

Here is my JS:

function Male() {
    let st1 = 8;
    document.getElementById("step1").innerHTML = "Complete";
    console.log(st1);
}

function Female() {
    let st1 = 2;
    document.getElementById("step1").innerHTML = "Complete";
    console.log(st1);
}

function Other() {
    let st1 = 4;
    document.getElementById("step1").innerHTML = "Complete";
    console.log(st1);
}
//End Group one
//Start group two, each of these are called when the user clicks a button with their age group.
function seventeen(st1) {
    let st2 = parseInt(st1)   4;
    document.getElementById("step2").innerHTML = "Complete";
    console.log(st2)
}

function twentyseven(st1) {
    let st2 = parseInt(st1)   3;
    document.getElementById("step2").innerHTML = "Complete";
    console.log(st2);
}

function thirtyeight(st1) {
    let st2 = parseInt(st1)   2;
    document.getElementById("step2").innerHTML = "Complete"
    console.log(st2);
}

function fortyeight(st1) {
    let st2 = parseInt(st1)   1;
    document.getElementById("step2").innerHTML = "Complete"
    console.log(st2);
}

function fiftyeight(st1) {
    let st2 = parseInt(st1)   0;
    document.getElementById("step2").innerHTML = "Complete"
    console.log(st2)
}
//End group 2
//I haven't finished the rest.

Thanks for any help!

CodePudding user response：

and welcome to SO.

I think you are misunderstanding how function calls and parameters work. Take this function for example:

function seventeen(st1) {
    let st2 = parseInt(st1)   4;
    document.getElementById("step2").innerHTML = "Complete";
    console.log(st2)
}

This creates a function named seventeen that takes st1 as a parameter. So, to call it you would do:

seventeen(50); // Or whatever number you want here

If you want the first set of questions to be saving data to st1 such that the second set of question functions can read that, you need to store st1 outside of the functions.

(Learn more about function scope here)

So, you would want to do something like:

let st1 = 0;
let st2 = 0;

function Male() {
    st1 = 8;
    document.getElementById("step1").innerHTML = "Complete";
    console.log(st1);
}

function seventeen() {
    let st2 = parseInt(st1)   4;
    document.getElementById("step2").innerHTML = "Complete";
    console.log(st2)
}

CodePudding user response：

Update your html like below.

<button onclick="Male()">Male</button>
    <button onclick="Female()">Female</button>
    <button onclick="Other()">Other</button>
    <p id="step2">Step 2</p>
    <button onclick="seventeen(17)">17</button>
    <button onclick="twentyseven(27)">27</button>
    <button onclick="thirtyeight(38)">38</button>
    <button onclick="fortyeight(48)">48</button>
    <button onclick="fiftyeight(58)">58</button>

CodePudding user response：

I was reviewing your code, and in this line here where you call your JS function

    <button onclick="seventeen()">17</button>

You call the function seventeen, but when you define it it is defined like that

function seventeen(st1) {
    let st2 = parseInt(st1)   4;
    document.getElementById("step2").innerHTML = "Complete";
    console.log(st2)
}

In here, you receive the parameter st1 but you don't send it from the javascript, so it basically is undefined.

when you execute parseInt(st1) since st1 is undefined, parseInt will be NaN, that is exactly what happens in the other methods

CodePudding user response：

You should first define str1 outside of the functions so that their field of scope is global, and remove the parameter str1 from the functions that belong to the second group so that the code is as follows.

 let st1;

function Male() {
    st1 = 8;
    document.getElementById("step1").innerHTML = "Complete";
    console.log(st1);
}

function Female() {
    st1 = 2;
    document.getElementById("step1").innerHTML = "Complete";
    console.log(st1);
}

function Other() {
    st1 = 4;
    document.getElementById("step1").innerHTML = "Complete";
    console.log(st1);
}
//End Group one
//Start group two, each of these are called when the user clicks a button with their age group.
function seventeen() {
    let st2 = parseInt(st1)   4;
    document.getElementById("step2").innerHTML = "Complete";
    console.log(st2)
}

function twentyseven() {
    let st2 = parseInt(st1)   3;
    document.getElementById("step2").innerHTML = "Complete";
    console.log(st2);
}

function thirtyeight() {
    let st2 = parseInt(st1)   2;
    document.getElementById("step2").innerHTML = "Complete"
    console.log(st2);
}

function fortyeight() {
    let st2 = parseInt(st1)   1;
    document.getElementById("step2").innerHTML = "Complete"
    console.log(st2);
}

function fiftyeight() {
    let st2 = parseInt(st1)   0;
    document.getElementById("step2").innerHTML = "Complete"
    console.log(st2)
}
//End group 2
//I haven't finished the rest.