JS饮食点数计算器第二组函数返回NaN问题求助

• 第一组函数中的st1是局部变量，函数执行完毕后即被销毁，第二组函数无法访问该值。
• 点击第二组按钮时，调用的函数（如seventeen()）未传递任何参数，函数内的st1参数为undefined，parseInt(undefined)返回NaN，导致最终计算结果为NaN。

方案1：使用全局变量存储第一步数值 #

将st1定义为全局变量，让所有函数都能访问：

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);
}

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

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

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

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

function fiftyeight() {
    let st2 = st1 + 0;
    document.getElementById("step2").innerHTML = "Complete"
    console.log(st2)
}

HTML代码无需修改。

方案2：用DOM元素的dataset存储数值（避免全局变量） #

第一组函数将数值存入step1元素的dataset属性，第二组函数从该属性读取：

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

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

function Other() {
    document.getElementById("step1").dataset.value = 4;
    document.getElementById("step1").innerHTML = "Complete";
    console.log(4);
}

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

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

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

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

function fiftyeight() {
    const st1 = parseInt(document.getElementById("step1").dataset.value);
    let st2 = st1 + 0;
    document.getElementById("step2").innerHTML = "Complete"
    console.log(st2)
}

HTML代码无需修改。

内容的提问来源于stack exchange，提问作者David Kolenda