title: Unable to fill the box using css in JavaScipt
body: <p><a href="https://i.stack.imgur.com/HH00Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HH00Z.png" alt="" /></a></p>
  <p>I am making a quiz website using javascript, and with the help of css I am trying to fill the box with color as the quiz goes on. However the code I am writing is not exactly working. any suggestions? I think the <strong>game.js</strong> class is unable to find <strong>progressBarFull</strong>. any sort of help will be appreciated.</p>
  <p>//////game.js/////</p>
  <pre><code>const question = document.getElementById('question');
  const choices = Array.from(document.getElementsByClassName('choice-text'));
  const progressText = document.getElementById('progressText');
  const scoreText = document.getElementById('score');
  const progressBarFull = document.getElementById('progressBarFull');
  
  let currentQuestion = {};
  let acceptingAnswer = false;
  let Score = 0 ;
  let QuestionCounter = 0;
  let AvailableQuestion = [];
  
  let questions = [
      {
           question:&quot;Inside which HTML element do we put JavaScript?&quot;,
           choice1: &quot;&lt;script&gt;&quot;,
           choice2: &quot;&lt;javascript&gt;&quot;,
           choice3: &quot;&lt;js&gt;&quot;,
           choice4: &quot;&lt;scripting&gt;&quot;,
           answer: 1
          },
          {
           question:&quot;What is correct syntax for referreing to an external script called xxx.js&quot;,
           choice1: &quot;&lt;script href='xxx.js'&gt;&quot;,
           choice2: &quot;&lt;script name='xxx.js'&gt;&quot;,
           choice3: &quot;&lt;script src='xxx.js'&gt;&quot;,
           choice4: &quot;&lt;script file='xxx.js'&gt;&quot;,
           answer: 3
          },
          {
           question:&quot;How do you write Hello in an alert box&quot;,
           choice1: &quot;msgbox('Hello World')&quot;,
           choice2: &quot;alertbox('Hello World')&quot;,
           choice3: &quot;msg('Hello World')&quot;,
           choice4: &quot;alert('Hello World')&quot;,
           answer: 4
          },
  ]
  
  
  // Constants
  
  const CORRECT_BONUS = 10;
  const MAX_QUESTIONS = 3;
  const INCORRECT = 10;
  
  startgame = (  ) =&gt;{
      QuestionCounter=0;
      Score=0;
      AvailableQuestion=[...questions];
      console.log(AvailableQuestion);
      getNewQuestion();
  };
  
  getNewQuestion =()=&gt; {
      if(AvailableQuestion.length == 0 || question&gt;= MAX_QUESTIONS){
          // Go to the endpage
          return window.location.assign('/end.html');
      }
      QuestionCounter++;
      progressText.innerText = `Question ${QuestionCounter} / ${MAX_QUESTIONS}`;
  
      
      // Update The ProgressBar
      progressBarFull.style.width = `${(QuestionCounter / MAX_QUESTIONS) * 100}
      %`
      console.log((QuestionCounter / MAX_QUESTIONS) * 100)
  
  
      const questionIndex = Math.floor(Math.random() * AvailableQuestion.length);
      currentQuestion = AvailableQuestion[questionIndex];
      question.innerText = currentQuestion.question;
  
  
      // foreach iterates through the choices
      choices.forEach( choice =&gt; {
          const number = choice.dataset['number']; 
          // getting number from data-number --- game.html
          choice.innerText = currentQuestion['choice' + number]
      })
      AvailableQuestion.splice(questionIndex, 1);
  
      acceptingAnswer = true
  };
  
  choices.forEach(choice =&gt; {
      choice.addEventListener(&quot;click&quot;, e=&gt; {
          if(!acceptingAnswer) return;
          
          
          acceptingAnswer = false;
          const selectedChoice = e.target;
          const selectedAnswer = selectedChoice.dataset[&quot;number&quot;];
          
          // Different ways of using conditions
          // const classToApply = 'incorrect';
          // if(selectedAnswer == currentQuestion.answer){
          //     classToApply = 'correct;'
          // }
  
          const classToApply = selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect';
          if (classToApply === 'correct'){
              incrementScore(CORRECT_BONUS)
          }
          else{
              decrementScore(INCORRECT)
          }
          // console.log(classToApply)
  
          selectedChoice.parentElement.classList.add(classToApply)
          setTimeout(() =&gt; {
              selectedChoice.parentElement.classList.remove(classToApply)
              getNewQuestion()
              
          }, 250);
  
         
  
          // console.log(selectedAnswer == currentQuestion.answer)
      })
  
  })
  
  incrementScore = num =&gt; {
      Score += num;
      scoreText.innerText = Score;
  }
  
  decrementScore = num =&gt; {
      Score -= num;
      scoreText.innerText = Score;
  }
  
  startgame()
  </code></pre>
  <p>/////game.html///</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Game - Play&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;app.css&quot; &gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;game.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;div id=&quot;game&quot; class=&quot;justify-center flex-column&quot;&gt;
              &lt;div id=&quot;hud&quot;&gt;
                  &lt;div id=&quot;hud-item&quot;&gt;
                      &lt;p id=&quot;progressText&quot; class=&quot;hud-prefix&quot;&gt;
                          Question
                      &lt;/p&gt;
                      &lt;div id=&quot;progressBar&quot;&gt;
                          &lt;div id=&quot;progressBarFull&quot;&gt; &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt; 
                  &lt;div id=&quot;hud-item&quot;&gt;
                      &lt;p class=&quot;hud-prefix&quot;&gt;
                          Score
                      &lt;/p&gt;
                      &lt;h1 class=&quot;hud-mainText&quot; id=&quot;score&quot;&gt;
                          0
                      &lt;/h1&gt;
                  &lt;/div&gt; 
              &lt;/div&gt;
              &lt;h2 id=&quot;question&quot;&gt;
                  Answer to this question?
              &lt;/h2&gt;
              &lt;div class=&quot;choice-container&quot;&gt;
                  &lt;p class=&quot;choice-prefix&quot;&gt;A&lt;/p&gt;
                  &lt;p class=&quot;choice-text&quot; data-number=&quot;1&quot;&gt;Choice 1&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class=&quot;choice-container&quot;&gt;
                  &lt;p class=&quot;choice-prefix&quot;&gt;B&lt;/p&gt;
                  &lt;p class=&quot;choice-text&quot; data-number=&quot;2&quot;&gt;Choice 2&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class=&quot;choice-container&quot;&gt;
                  &lt;p class=&quot;choice-prefix&quot;&gt;C&lt;/p&gt;
                  &lt;p class=&quot;choice-text&quot; data-number=&quot;3&quot;&gt;Choice 3&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class=&quot;choice-container&quot;&gt;
                  &lt;p class=&quot;choice-prefix&quot;&gt;D&lt;/p&gt;
                  &lt;p class=&quot;choice-text&quot; data-number=&quot;4&quot;&gt;Choice 4&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
              &lt;script src=&quot;game.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>//////game.css////</p>
  <pre><code>.choice-container{
      display: flex;
      margin-bottom: 0.5rem;
      width: 100%;
      font-size: 1.8rem;
      border:0.1rem solid rgb(86, 235, 0.25);
      background-color: white;
  }
  
  .choice-container:hover{
      cursor: pointer;
      box-shadow: 0 0.4rem 1.4rem 0 rgb(86, 165, 235, 0.5);
      transform: translate(-0.1rem);
      transition: transfor 150ms;
  }
  
  .choice-prefix{
      padding:1.5rem 2.5rem;
      background-color: #56a5eb;
      color: white;
  
  }
  
  .choice-text{
      padding: 1.5rem;
      width: 100%;
  }
  
  .correct{
      background-color: #28a745;
  }
  
  .incorrect{
      background-color: #dc3545;
  }
  
  /* HUD */
  #hud {
  display: flex;
  justify-content: space-evenly;
  }
  
  .hud-prefix{
      text-align: center;
      font-size: 2rem;
  }
  
  .hud-main-text{
      text-align: center;
  }
  
  #progressBar{
      width: 20rem;
      height: 4rem;
      border: 0.3rem solid #56a5eb;
      margin-top: 0.9rem;
  
  }
  
  #progressBarFull{
      height: 3.4rem;
      background-color:#56a5eb;
      width: 0%;
  }
  </code></pre>