Question

我想编写一个clicker html游戏，我有一些基本代码。我想在progress元素中显示Wood的数量。如果它接近最大量，我想以不同的方式为我的进度条着色。我想

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

应该有效。然后我添加一个新类，如果我的条件（接近满）为TRUE并在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 wood：

<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

应该 - 不是真的。逗号选择器选择多个元素。你的选择器应该是：

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

以便选择具有该类名的progress元素。

Queryselector未找到<progress>元素

1 个答案: