Estoy tratando de escribir una aplicación de número de adivinanzas. contiene dos funciones, la primera que es startGame() funciona correctamente (recibe el número máximo y luego desaparece tomando la clase oculta). pero el segundo, que se supone que recibe las conjeturas de los usuarios y verifica las conjeturas de los usuarios con el número objetivo para ver si funcionan igual. Aquí está el código fuente html y javascript.

 const stage2 = document.getElementById('stage2'); const maximuminput = document.getElementById('maximum'); const startbutton = document.getElementById('start'); const guessinput = document.getElementById('guess-number'); const guessbutton = document.getElementById('guess-button'); const chancesspan = document.getElementById('chances'); let maximumNumber, totalChances, targetNumber; startbutton.addEventListener('click', startGame); function startGame(){ maximumNumber = Number(maximuminput.value); if(maximumNumber > 10) { targetNumber = Math.floor(Math.random() * (maximumNumber + 1)); totalChances = Math.floor(Math.log2(maximumNumber)) + 1; chancesspan.textContent = totalChances; stage1.classList.toggle('hidden'); stage2.classList.toggle('hidden'); }else { const p = document.querySelector('#stage1 p'); p.outerHTML = '<P class="red">عدد وارد شده باید بزرگتر از 10 باشد</P>' } } guessbutton.addEventListener('click', guess); function guess(){ let yourguess = NUmber(guessinput.value); if(yourguess == targetNumber){ stage2.innerHTML = '<p class="blue">تبریک شما موفق شدید</p>'; return; }else if(yourguess > targetNumber) { const status = document.getElementById('status'); status.innerHTML += `<span class="red">${yourguess}</span>`; }else { const status = document.getElementById('status'); status.innerHTML += `<span class="red">${yourguess}</span>`; } remainingChances = Number(chancesspan.textContent); remainingChances -- ; if(remainingChances > 0 ){ chancesspan.textContent = remainingChances; }else { stage2.innerHTML = '<p class="red>!متاسفانه فرصت شما به پایان رسید</p>"' } }```