Javascript Variable value being deleted? (Probably not, but it seems like it)-CodePudding

I am trying to make a simple dieting calculator with my limited HTML, CSS, and JS knowledge. While I was partway through coding the Javascript (the third step for the user out of five), my third variable was returning as 0, when it should return as something else (~10-15) My logic works like this:

A user clicks a button from a group that specifies to them.

For the first function, st1 = (a number that specifies on which button is pressed) Do note that at the start of the js, the variables are already declared (let st1 = 0; let st2 = 0; etc.)

For the second function, st2 = parseInt(st1) (another number)

The same thing happens for the 3rd function

I have not finished the rest

I have tried console.log()ing st2 when the third step is called, and it returns as 0. Thanks for any help!

Here is the HTML:

<!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>Document</title>
</head>
<body>
    <script src="script.js"></script>
    <table>
        <tr>
            <td>
                <p id="step1">Step 1.</p>
            </td>
            <td>
                Gender:
            </td>
            <td>
                <table>
                    <tr>
                        <td>
                            <button onclick="Male()">Male</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button onclick="Female()">Female</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button onclick="Other()">Other/Prefer Not to say</button>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <p id="step2">Step 2.</p>
            </td>
            <td>
                Age:
            </td>
            <td>
                <table>
                    <tr>
                        <td>
                            <button onclick="seventeen()">Between 17-26</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button onclick="twentyseven()">Between 27-37</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button onclick="thirtyeight()">Between 38-47</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button onclick="fortyeight()">Between 48-57</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button onclick="fiftyeight()">Over 58</button>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <p id="step3">Step 3.</p>
            </td>
            <td>
                Height
            </td>
            <td>
                <table>
                    <tr>
                        <td>
                            <button onclick="under5()">Below 5ft</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button onclick="btwn()">Between 5'0" - 5'9"</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button onclick="over()">Over 5'10"</button>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
</body>
</html>

And here is the JS:

let st1 = 0;
let st2 = 0;
let st3 = 0;

//Start Group one, these three functions are each called when clicking a button with the user's gender
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
//Start Group 3, The user clicks a button with their height range.
function under5() {
    let st3 = st2   0;
    document.getElementById("step3").innerHTML = "Complete";
    console.log(st3);
}

function btwn() {
    let st3 = parseInt(st2)   1;
    document.getElementById("step3").innerHTML = "Complete";
    console.log(st3);
}

function over() {
    let st3 = parseInt(st2)   2 ;
    document.getElementById("step3").innerHTML = "Complete";
    console.log(st3);
}
//End group 3
//There are two more groups I haven't finished coding, so won't include here.

CodePudding user response：

when you put the keyword let before the variable, it gets redeclared. try removing the lets from the functions.

also, you could do something like this, though there are even better ways...

<button onclick="gender(8)">Male</button>
<button onclick="gender(2)">Female</button>

function gender( value ) {
    std1 = value;
}