JavaScript骰子游戏中punktzahl点击后出现NaN问题求助

问题根源 #

• 变量作用域错误：starteSpiel函数内的Punktzahl是局部变量，仅在该函数内部有效，其他计分函数无法访问它。
• 函数参数未定义：点击按钮调用KleineStraße()时未传递参数，函数内的Punktzahl参数值为undefined，执行undefined + 5运算后会得到NaN。

修复方案 #

将Punktzahl改为全局变量，让所有函数共享这个分数值，同时移除函数中的冗余参数：

修改后的JavaScript代码 #

// 全局变量存储分数
var Punktzahl = 0;

starteSpiel();

function starteSpiel() {
  Punktzahl = 0;
  document.getElementById("punktzahl").innerText = Punktzahl;
}

function sonderKarte() {
}

function Mittelwert() {
  document.getElementById("MittelwertAusgabe").toggleAttribute ("hidden");
}
        
function Chance() {
  document.getElementById("ChanceAusgabe").toggleAttribute ("hidden");
}

function VollesHaus() {
}

function KleineStraße() {
  var KleineStraßePunkte = 5;

  Punktzahl += KleineStraßePunkte;
  document.getElementById("punktzahl").innerText = Punktzahl;
}

function GroßeStraße() {
}

function Gleiche3() {
}

function Gleiche4() {
}

function Gleiche5() {
}

说明 #

1. 把Punktzahl声明在所有函数外部，变成全局变量，确保所有计分函数都能读取和修改它。
2. 移除所有函数的Punktzahl参数，避免局部变量覆盖全局变量。
3. starteSpiel函数初始化全局变量Punktzahl为0，并更新DOM显示。
4. KleineStraße函数直接修改全局变量，再更新DOM，此时分数会正确累加。

HTML代码无需修改，因为按钮的onclick调用本来就没有传递参数，现在函数也不再需要参数。

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