title: Trying to toggle different "screens" by using divs in css, javascript, using display: none or block. Everything works except for last toggle
body: <p>I thought I understood how to do this because all my toggles work, except for the last one. I can't figure out why!! It's written in the same way as other ones before it. The one that doesn't work is specifically the button with id=&quot;startYearOne&quot; That's supposed to toggle to the next div which is &quot;scrControls&quot; but it doesn't work like the other ones.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("btnProfessions").addEventListener("click", funcProfessions);
  document.getElementById("btnYearOne").addEventListener("click", startYearOne);
  
  function funcProfessions() {
  
    document.getElementsByClassName("scrProfessions")[0].style.display = "none";
    document.getElementsByClassName("scrChosenCareer")[0].style.display = "block";
  
    var listProfessions = ["nurse", "worker", "teacher"];
  
    var randomCareer = listProfessions[Math.floor(Math.random()*listProfessions.length)];
    document.body.innerHTML = document.body.innerHTML.replace('profession', randomCareer);
  
    switch (randomCareer) {
      case 'nurse':
        document.getElementById("imgCareer").src="images/nurse.png";
        document.body.innerHTML = document.body.innerHTML.replace('0', '1300');
        break;
      case 'worker':
        document.getElementById("imgCareer").src="images/worker.webp";
        document.body.innerHTML = document.body.innerHTML.replace('0', '1000');
        break;
      case 'teacher':
        document.getElementById("imgCareer").src="images/teacher.jpg";
        document.body.innerHTML = document.body.innerHTML.replace('0', '1500');
        break;
    }
  }
  
  
  
  function startYearOne() {
    console.log("startYear works!");
    document.getElementsByClassName("scrChosenCareer")[0].style.display = "none";
    document.getElementsByClassName("scrControls")[0].style.display = "block";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.scrChosenCareer{
    display:none;
  }
  .scrControls{
    display:none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="scrChosenCareer"&gt;
          &lt;h3&gt;Congratulations! You are a profession. You make $0 a year.&lt;/h3&gt;
          &lt;img src="images/doctor2.jpg" id="imgCareer"&gt;&lt;/img&gt;
          &lt;h3&gt;After incurring living expenses of $700 a year,
          you can allocate the rest into:&lt;/h3&gt;
          &lt;ul&gt;
            &lt;li&gt;a bank, and gain a 5% annual interest. &lt;/li&gt;
            &lt;li&gt;put it in stocks and see how the market performs.&lt;/li&gt;
            &lt;li&gt;Any money not allocated, will be placed as cash under your mattress.&lt;/li&gt;
          &lt;/ul&gt;
          &lt;button id="btnYearOne"&gt;Click to continue&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div class="scrControls"&gt;
          &lt;input type="range" value="50" min="0" max="100" id="rStocks" oninput="rangevalue.value=value"/&gt;&lt;/input&gt;
          &lt;input type="number" id="stocksValue" value="50" oninput="range.value=value"&gt;&lt;/input&gt;
  
          &lt;input type="range" value="50" min="0" max="100" id="rBank" oninput="rangevalue.value=value"/&gt;&lt;/input&gt;
          &lt;input type="number" id="bankValue" value="50" oninput="range.value=value"&gt;&lt;/input&gt;
  
          &lt;button id="btnContinue"&gt;Continue to Next Year&lt;/button&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Nothing shows up on console either.</p>
  <p>Any help would be highly appreciated!</p>