QuerySelector无法找到<progress>元素，点击器游戏进度条功能失效求助

我帮你找到了两个核心问题，这就是木材进度条逻辑不生效的原因：

1. 元素选择器错误 #

你在JS里用了类选择器（.FoodProgressBar/.WoodProgressBar），但HTML里给进度条设置的是id属性（id="FoodProgressBar"/id="WoodProgressBar"），而且querySelector("progress, .xxx")这种写法会同时选中所有<progress>元素和带.xxx类的元素，这会导致逻辑匹配混乱。

正确的做法是用id选择器（#开头）精准定位单个进度条：

• 食物进度条：document.querySelector("#FoodProgressBar")
• 木材进度条：document.querySelector("#WoodProgressBar")

2. 食物JS里的拼写错误 #

你在食物的JS代码里写了cosnole.log，这是console.log的拼写错误，会直接抛出语法错误——虽然你说食物进度条生效了，但这个错误可能会影响后续代码的稳定性，建议一并修正。

修正后的完整代码 #

食物JavaScript代码 #

// 修正选择器和拼写错误
var foodProgressColor = document.querySelector("#FoodProgressBar");
console.log(foodProgressColor);

if (maxFood - foodCount <= maxFood / 100 * 10 ) {
  foodProgressColor.classList.add("Over10");
} else {
  foodProgressColor.classList.remove("Over10");
}

if (maxFood - foodCount <= maxFood / 100 * 50 && maxFood - foodCount > maxFood / 100 * 10) {
  foodProgressColor.classList.add("Over50");
} else{
  foodProgressColor.classList.remove("Over50");
}

木材JavaScript代码 #

// 修正选择器
var woodProgressColor = document.querySelector("#WoodProgressBar");
console.log(woodProgressColor);

if (maxWood - woodCount <= maxWood / 100 * 10 ) {
  woodProgressColor.classList.add("Over10");
} else {
  woodProgressColor.classList.remove("Over10");
}

if (maxWood - woodCount <= maxWood / 100 * 50 && maxWood - woodCount > maxWood / 100 * 10) {
  woodProgressColor.classList.add("Over50");
} else{
  woodProgressColor.classList.remove("Over50");
}

另外小提醒：你进度条的max属性设为100，但文本显示的是0 / 1000，这里数值逻辑要保持一致哦，避免后续出现其他显示或计算问题。

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