JS页面加载即执行最后else分支 未触发按钮onclick事件问题
问题根因
代码存在3处逻辑错误,直接导致页面加载即执行计算、交互不符合预期:
- 事件绑定写法错误:
document.getElementById("oblicz").onclick = marcin();这行给onclick赋值时,marcin后加了圆括号,JS解析到这行会立刻执行marcin函数,而非把函数注册为点击触发的回调。正确写法是直接传入函数引用,不要加括号。 - 取值时机错误:脚本顶层就提前获取了
rodzaj、ilosc两个输入框的值,页面初始加载时输入框为空,拿到的是空值,后续点击按钮时不会重新读取用户输入的最新内容。 - 逻辑判断符号错误:
if条件判断中误用了单等号=(赋值操作符),而非双等/三等相等判断符,会直接给变量赋值,导致判断逻辑完全失效。
修复方案
将原有JS代码替换为如下内容即可:
function pierwszyrodzaj(ilosc){ const koszt = ilosc * 4 document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa:" + koszt + "zł"; } function drugirodzaj(ilosc){ const koszt = ilosc * 3.5 document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa:" + koszt + "zł"; } function inny(){ document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa: 0zł"; } function marcin (){ // 点击按钮时再读取最新输入值,统一转成数字类型 const rodzaj = Number(document.getElementById("rodzajPaliwa").value); const ilosc = Number(document.getElementById("litry").value); // 使用三等号做严格相等判断 if(rodzaj === 1){ pierwszyrodzaj(ilosc); }else if(rodzaj === 2){ drugirodzaj(ilosc); }else{ inny(); } } // 注册点击事件,注意不要在函数名后加括号 document.getElementById("oblicz").onclick = marcin;
修复后表现
页面初始加载时不会自动执行计算逻辑,仅当用户点击OBLICZ按钮时,才会读取输入框的最新值,根据选择的燃油类型计算对应油费,不会再出现加载即显示koszt paliwa:0zł.的问题。

内容的提问来源于stack exchange,提问作者programistadawid
相关产品推荐
相关产品推荐

