0
Ich habe ein Problem mit meinem innerenHTML nicht aktualisieren die Anzeige, wenn ich eine Taste drücke. Ich benutze console.log und ich kann sehen, dass die Werte tatsächlich das erste Mal aktualisieren, aber die Seite nicht. Im Bild unten habe ich den Startknopf einmal und zweimal höher gedrückt und Sie können die Werte im Protokoll ändern sehen. Dieser Effekt tritt bei beiden Schaltflächen auf, bei denen der Wert einmal und bei nachfolgenden Klicks nicht erneut aktualisiert wird. Außerdem wird die Webseite überhaupt nicht aktualisiert. Das Ziel des Programms ist es, ein Spiel zu machen, bei dem der Computer die Zahl, an die Sie denken, in einem bestimmten Bereich errät und Sie können entweder höher, niedriger oder richtig wählen. Ich bin neu hier, also lassen Sie mich bitte wissen, ob es irgendeinen Weg gibt, wie ich meine Beiträge in Zukunft verbessern kann.InnerHTML nicht in JavaScript aktualisieren
Image of webpage with log open
Hier ist der Code:
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>
Works jetzt perfekt. Vielen Dank! –