试图切换不同的“屏幕”通过在CSS中使用DIV，JavaScript，使用Display：None或Block。除最后一个切换外，一切都起作用

Question

我以为我知道该怎么做，因为除了最后一个，我所有的切换都起作用。我不知道为什么！它以与其他之前的方式相同的方式编写。不起作用的一个是具有ID =“ startyearone”的按钮，该按钮应该切换到下一个div，即“ scrcontrols”，但它不像其他div。

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>

游戏机上也没有出现。

任何帮助将不胜感激！

Answer 1

哪个元素具有“ BTNProfessions”的ID？您的意思是“ btncontinue”？

哪个元素具有“ scrprofessions”的类名称？你是说“ 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>