Trying to toggle different "screens" by using divs in css, javascript, using display: none or block. Everything works except for last toggle

Question

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="startYearOne" That's supposed to toggle to the next div which is "scrControls" but it doesn't work like the other ones.

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";
}

.scrChosenCareer{
  display:none;
}
.scrControls{
  display:none;
}

<div class="scrChosenCareer">
        <h3>Congratulations! You are a profession. You make $0 a year.</h3>
        <img src="images/doctor2.jpg" id="imgCareer"></img>
        <h3>After incurring living expenses of $700 a year,
        you can allocate the rest into:</h3>
        <ul>
          <li>a bank, and gain a 5% annual interest. </li>
          <li>put it in stocks and see how the market performs.</li>
          <li>Any money not allocated, will be placed as cash under your mattress.</li>
        </ul>
        <button id="btnYearOne">Click to continue</button>
    </div>

    <div class="scrControls">
        <input type="range" value="50" min="0" max="100" id="rStocks" oninput="rangevalue.value=value"/></input>
        <input type="number" id="stocksValue" value="50" oninput="range.value=value"></input>

        <input type="range" value="50" min="0" max="100" id="rBank" oninput="rangevalue.value=value"/></input>
        <input type="number" id="bankValue" value="50" oninput="range.value=value"></input>

        <button id="btnContinue">Continue to Next Year</button>
    </div>

Nothing shows up on console either.

Any help would be highly appreciated!

Answer 1

Which element has an ID of "btnProfessions"? Do you mean "btnContinue"?

Which element has a class-name of "scrProfessions"? Do you mean "scrControls"?

document.getElementById("btnContinue").addEventListener("click", funcProfessions);
document.getElementById("btnYearOne").addEventListener("click", startYearOne);

function funcProfessions() {

document.getElementsByClassName("scrControls")[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";
}

.scrChosenCareer{
  /* display:none; */
}
.scrControls{
  display:none;
}

<div class="scrChosenCareer">
        <h3>Congratulations! You are a profession. You make $0 a year.</h3>
        <img src="images/doctor2.jpg" id="imgCareer"></img>
        <h3>After incurring living expenses of $700 a year,
        you can allocate the rest into:</h3>
        <ul>
          <li>a bank, and gain a 5% annual interest. </li>
          <li>put it in stocks and see how the market performs.</li>
          <li>Any money not allocated, will be placed as cash under your mattress.</li>
        </ul>
        <button id="btnYearOne">Click to continue</button>
    </div>

    <div class="scrControls">
        <input type="range" value="50" min="0" max="100" id="rStocks" oninput="rangevalue.value=value"/></input>
        <input type="number" id="stocksValue" value="50" oninput="range.value=value"></input>

        <input type="range" value="50" min="0" max="100" id="rBank" oninput="rangevalue.value=value"/></input>
        <input type="number" id="bankValue" value="50" oninput="range.value=value"></input>

        <button id="btnContinue">Continue to Next Year</button>
    </div>