I thought I grasped the concept of this because all my toggles are working fine, except for the last one. The frustrating part is that it's written in the same manner as the others before it. The problematic button is identified by id="startYearOne". It should toggle to the next div known as "scrControls", but it simply refuses to work unlike the others.
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 assistance provided would be greatly appreciated!