0
У меня проблема с моим innerHTML, не обновляющим дисплей, когда я нажимаю кнопку. Я использую console.log, и я вижу, что значения фактически обновляются в первый раз, но страницы нет. На изображении ниже я дважды нажал кнопку запуска дважды и вы можете увидеть значения в изменении журнала. Этот эффект происходит с обоими кнопками, где он будет обновлять значение один раз, а затем не повторять последующие клики. Кроме того, веб-страница не обновляется вообще. Цель программы - сделать игру, в которой компьютер догадывается о количестве, о котором вы думаете, в определенном диапазоне, и вы можете выбрать либо более высокий, более низкий, либо правильный. Я новичок здесь, поэтому, пожалуйста, дайте мне знать, есть ли способ улучшить мои должности в будущем.InnerHTML не обновляется в JavaScript
Image of webpage with log open
Вот код:
var guess = 0; // Number of guesses remaining
var currentGuess = 0;
function runGame() {
//get variables from the input fields in HTML form and convert to integer
var low = parseInt(document.getElementById('lowNum').value);
var high = parseInt(document.getElementById('highNum').value);
//boolean that checks if the game is won
if (document.getElementById('compGuess').value !== '' ) {
guess = parseInt(document.getElementById('compGuess').value);
} else {
alert ("You have to let the computer have at least one guess!");
}
//input validation
if(low < high && low > 0 && high <= 50 && guess > 0 && guess <= 10) {
// Input validated
//alert("Low number: " + low + "\nHigh Number: " + high + "\nComputer Guesses: " + guess);
currentGuess = getRndInteger(low, high);
setElementValues();
showButtons();
} else {
alert("Invalid selection. Make sure that the number range is between 1 and 50 and guesses are higher than zero.");
}
}
function processGuess(status, currentGuess) {
if (status == 'high') {
currentGuess = currentGuess - 1;
} else if (status == 'low') {
currentGuess = currentGuess + 1;
} else if (status == 'correct') {
wonGame();
}
//troubleshooting code
console.log(status) ;
console.log(currentGuess);
setElementValues();
return;
}
function setElementValues() {
console.log('setting values');
document.getElementById("computerGuessVal").innerHTML = currentGuess;
document.getElementById("guessesLeft").innerHTML = guess;
}
//generate computer guess
function getRndInteger(low, high) {
high = Math.floor(high);
low = Math.ceil(low);
return Math.floor(Math.random() * (high - low + 1)) + low;
}
//make bottom buttons visibile
function showButtons() {
document.getElementById("higher").style.visibility = 'visible';
document.getElementById("lower").style.visibility = 'visible';
document.getElementById("correct").style.visibility = 'visible';
}
//hide bottom buttons
function hideButtons() {
document.getElementById("higher").style.visibility = 'none';
document.getElementById("lower").style.visibility = 'none';
document.getElementById("correct").style.visibility = 'none';
}
function wonGame() {
/* document.getElementById("lowNum").innerHTML = 1;
document.getElementById("highNum").innerHTML = 1;
document.getElementById("guess").innerHTML = 1;
document.getElementById("computerGuessVal").innerHTML =" ";
document.getElementById("guessesLeft").innerHTML = " ";
alert("Looks like the computer guessed correctly. Thanks for playing!");
*/
alert("Function yo");
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>ITEC345-101 Assignment 1</title>
<script language="JavaScript" src="ITEC345_101_FERGUSON_LAB1.js"></script>
</head>
<body>
<h1>Welcome to the number guessing game. Select a range of numbers between 1 and 50 and the
computer will try to guess it.<br> Tell the computer how many guesses it gets and see if you can stump it!</h1><br>
<h2>Pick a number range between 1 and 50</h2>
Low Number: <input type="number" value = "1" name="lowNum" id="lowNum" ><br>
High Number: <input type="number" value= "1" name="highNum" id="highNum"><br>
<br>
<br>
<h2>Now think of a number inside that range</h2>
Number of guesses computer gets (Max 10):<input type="number" value = "1" name="compGuess" id="compGuess">
<br>
<br>
<input type="button" value="Start" onclick="runGame()">
<br>
<br>
<br>
<font size="12">Current Computer Guess:</font> <h1 id="computerGuessVal"> </h1> <font size="10">Guesses left:</font><h1 id="guessesLeft"></h1>
<br>
<br>
<input type="button" value="Higher" id="higher" style= "visibility:hidden" onclick="processGuess('high', currentGuess)">
<input type="button" value="Lower" id="lower" style= "visibility:hidden" onclick="processGuess('low', currentGuess)">
<input type="button" value="Correct" id="correct" style= "visibility:hidden" onclick="processGuess('correct', currentGuess)">
</body>
</html>
теперь работает. Благодаря! –