JS函数marcin始终执行最后else分支返回0zł燃油费用问题

问题现象 #

现有波兰语燃油价格计算页面，预期根据用户选择的燃油类型、输入的加油升数计算总费用，实际点击计算按钮后始终返回koszt paliwa: 0zł，即永远走到marcin函数的else兜底分支。

相关代码 #

JavaScript 原代码 #

var rodzaj = document.getElementById("rodzajPaliwa").value;
rodzaj = parseInt (rozdaj);

var ilosc = document.getElementById("litry").value;
ilosc = parseInt (ilosc);
function pierwszyrodzaj(){
    var typ = 4;
    var suma1 = typ*ilosc;
    document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa:" + suma1 + "zł";
}
function drugirodzaj(){
    var typ = 3.5;
    var suma2 = typ*ilosc;
    document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa:" + suma2 + "zł";
}
function inny(){
    document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa: 0zł";
}

function marcin (){
    if(rodzaj == '1'){
        pierwszyrodzaj();
    }else if(rodzaj == '2'){
        drugirodzaj();
    }else{
        inny();
    }
    
}

document.getElementById("oblicz").onclick = marcin;

HTML 原代码 #

<!DOCTYPE html>
<html lang="pl-PL">

<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>STACJA PALIW</title>
    <link rel="stylesheet" href="styl3.css">
</head>

<body>

    <div id="baner-lewy">
        <h1>Stacja paliw</h1>
    </div>

    <div id="baner-prawy">
        <a href="index.html">
            <img src="home.png" alt="">
        </a>
        <a href="obliczenia.html">
            <img src="znak.png" alt="">
        </a>
    </div>

    <main>
        <h3>Oblicz koszt paliwa</h3>

        <label for="rodzajPaliwa">Rodzaj paliwa (1-benzyna, 2-olej napędowy): </label><br>
        <input type="number" name="" id="rodzajPaliwa"><br><br>
        <label for="litry">Ile litrów: </label><br>
        <input type="number" id="litry"><br>
        <br>
        <button id="oblicz" >OBLICZ</button>
    </br>
        <span id="koncowacenapaliwa"></span>

        <script src="skrypt.js"></script>
    </main>

    <div id="blok-lewy">
        <a href="kwerendy.txt" download="kwerendy">Pobierz kwerendy</a>
    </div>

    <div id="blok-prawy">
        <img src="samochod.png" alt="samochód">
    </div>
    


    <footer id="">
        <p>&copy; Stronę wykonał: Jan Kupczyk 4TID</p>
    </footer>


  
</body>

</html>

运行效果 #

问题根因 #

一共三个直接导致逻辑失效的问题：

• 变量名拼写错误：JS第2行rodzaj = parseInt (rozdaj);中，要解析的变量名把rodzaj错写为rozdaj，该行执行时直接触发引用错误，rodzaj从未被成功赋值为解析后的数值。
• 取值时机错误：rodzaj和ilosc两个变量在脚本刚加载、页面刚渲染完成时就获取了输入框的值，此时用户还未输入任何内容，输入框值为空字符串，后续用户输入内容后，这两个变量也不会自动更新，永远是初始的空值/NaN。
• 类型匹配矛盾：代码意图将rodzaj转为整数类型，但后续if判断却拿变量和字符串'1'、'2'做比较，逻辑不一致，进一步放大了异常概率。

修复方案 #

修复后的完整JS代码如下：

function pierwszyrodzaj(ilosc){
    var typ = 4;
    var suma1 = typ * ilosc;
    document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa: " + suma1 + "zł";
}
function drugirodzaj(ilosc){
    var typ = 3.5;
    var suma2 = typ * ilosc;
    document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa: " + suma2 + "zł";
}
function inny(){
    document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa: 0zł";
}

function marcin (){
    // 每次点击按钮时再读取最新的输入值
    var rodzaj = parseInt(document.getElementById("rodzajPaliwa").value);
    var ilosc = parseInt(document.getElementById("litry").value);
    // 增加输入合法性校验，非数字输入直接走兜底
    if(isNaN(rodzaj) || isNaN(ilosc)){
        inny();
        return;
    }
    // 统一用数字类型做全等判断，避免隐式类型转换问题
    if(rodzaj === 1){
        pierwszyrodzaj(ilosc);
    }else if(rodzaj === 2){
        drugirodzaj(ilosc);
    }else{
        inny();
    }
}

document.getElementById("oblicz").onclick = marcin;

修复点说明：

• 修正了变量名拼写错误，避免引用报错
• 将输入值读取、解析的逻辑移到marcin点击事件内部，保证每次计算都能拿到用户最新输入的内容
• 统一判断逻辑的类型，使用===全等判断匹配数字类型的rodzaj值，消除隐式转换风险
• 增加输入合法性校验，用户输入非数字内容时直接返回兜底结果，避免出现NaN的异常计算结果
• 给两个价格计算函数增加ilosc入参，不再依赖全局变量，逻辑耦合度更低
• 修正了输出文案中金额前缺失空格的小格式问题

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