Queryselector не находит элемент <progress>

Question

Я хочу запрограммировать кликерную HTML-игру, и у меня есть некоторый базовый код. Я хочу отобразить количество древесины в элементе прогресса. Если оно близко к максимальному значению, я хочу по-другому раскрасить индикатор выполнения. Я думаю

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

должно работать. Затем я добавляю новый класс, если мое условие (почти полное) - ИСТИНА и стиль в 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

должно работать - не совсем. Селектор запятой выбрать несколько элементов. Ваш селектор должен быть:

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

для выбора элемента прогресса с этим именем класса.