查询选择器未找到 <progress> 元素

Question

我想编写唱首歌 html 游戏，并且我有一些基本代码。我想在进度元素中显示木材的数量。如果它接近最大数量，我想给我的进度条涂上不同的颜色。我觉得

var woodBar = document.querySelector("progress, .mywoodprogressbarid");

应该可以。然后，如果我的条件（接近满）为真，我会添加一个新的 class，并在 css 中设置样式。我已经为食物元素做了这个，但是对于木头元素它不起作用:(我不确定为什么...... 这是我的代码（1）用于食物 2）用于木材）：

<div id="Food">
   <p style="text-align:center; font-family:'Roboto', sans-serif; font-size: 30px; color:#ffff; margin-bottom:30px;">Essen</p>
   <p id="foodAmountText" style="text-align:center; font-family:'Roboto', sans-serif; font-size:20px; color:#ffff;">0 / 1000</p>
   <progress id="FoodProgressBar" value="0" max="100"></progress>
   <div>
     <label style="float:right; margin-right:5px; margin-top:25px; font-family:'Roboto', sans-serif; font-size: 18px; color:#ffff;">+1/sek</label>
     <button id="FoodButton" class="ClickButton" type="button" onclick="grindFood()">Essen Kochen</button>
  </div>
  </div>

现在的js代码：

var foodProgressColor = document.querySelector("progress, .FoodProgressBar");
        cosnole.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");
        }

HTML木头：

<div id="Wood">
         <p style="text-align:center; font-family:'Roboto', sans-serif; font-size: 30px; color:#ffff; margin-bottom:30px;">Holz</p>
     <p id="woodAmountText" style="text-align:center; font-family:'Roboto', sans-serif; font-size:20px; color:#ffff;">0 / 1000</p>
     <progress id="WoodProgressBar" value="0" max="100"></progress>
     <div>
       <label style="float:right; margin-right:5px; margin-top:25px; font-family:'Roboto', sans-serif; font-size: 18px; color:#ffff;">+1/sek</label>
       <button id="WoodButton" class="ClickButton" type="button" onclick="grindWood()">Holz fällen</button>
    </div>
</div>

和 js:

var woodProgressColor = document.querySelector("progress, .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");
        }

你有什么帮助吗？提前致谢

Answer 1

应该有效 - 不是真的。逗号select或选择多个元素。您的 select 或应该是：

var woodBar = document.querySelector("progress.mywoodprogressbarid");

为了 select 具有 class 名称的进度元素。

查询选择器未找到 <progress> 元素

Queryselector not finding <progress> element

html

javascript

jquery-selectors