CODEWITHSUNDEEP
javascripthtml
Eric Ferguson
Eric Ferguson

Reputation: 43

InnerHTML not updating in JavaScript

I'm having an issue with my innerHTML not updating the display when I press a button. I'm using console.log and I can see that the values are in fact updating the first time but the page is not. In the image below I have hit the start button once and higher twice and you can see the values in the log change. This effect happens with both buttons where it will update the value once, and then not again on subsequent clicks. Also, the webpage does not update at all. The goal of the program is to make a game where the computer guesses the number you are thinking of within a certain range and you can choose either higher, lower, or correct. I'm new here so please let me know if there is any way I can improve my posts in the future.

Image of webpage with log open

Here's the 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>

Upvotes: 0

Views: 2210

Answers (1)

Barmar
Barmar

Reputation: 780714

The variable currentGuess in the processGuess() function is local to that function, because function parameters are always local variables. So when it updates this variable, it doesn't affect the global variable that setElementValues() puts into .innerHTML.

You need to be consistent in whether you're passing information through parameters or using global variables. If you're passing the current guess as a parameter, it should return the updated value, and the caller can assign the global variable, e.g.

onclick="currentGuess = processGuess('high', currentGuess);"

Or you could just stick to using the global variable, so you don't need to pass it as a parameter. It would then be just:

onclick="processGuess('high')"

Here's your code using the latter method.

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 ) {
    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')">  
        <input type="button" value="Lower" id="lower" style= "visibility:hidden"      onclick="processGuess('low')"> 
        <input type="button" value="Correct" id="correct" style= "visibility:hidden"  onclick="processGuess('correct')">
        
  
  </body>
</html>

Upvotes: 1

Related Questions