JavaScript InnerHTML not updating

Question

This is a typing game that I am working on. I am pretty much done with it except for one problem that I am having. When the person finishes typing all of the words in the turboTypingArray, I call my gameWin() function which assigns the class game-over-win to the div with the id "board" and edits the innerHTML of "board". However, it is only adding the class but not the innerHTML. How can I fix this? I apologize in advance if my code is difficult to understand, I am new o this and still learning.

//CONSTANTS
let duplicate;
const easyWords = ["dog", "cat", "bat", "axe", "hat", "ant", "sat", "rug", "mug", "bet", "art", "can", "day", "box", "egg", "few", "bed", "job", "hot", "men", "use", "sun", "jar", "lip", "flu", "aim", "red", "lid", "ear", "tea", "ski", "oak", "gum", "ham", "mob", "nut", "shy", "van", "elk", "gem", "rap", "fur", "eve", "cry", "mad", "ore", "tax", "six", "pet", "old", "map", "gym", "leg", "bus", "app", "war", "yes", "mud", "rim", "duo"];
const mediumWords = ["house", "beach", "adult", "chief", "funny", "hello", "metal", "sauce", "cocoa", "flags", "upset", "pearl", "trash", "enemy", "pizza", "humor", "eagle", "flame", "cargo", "puppy", "retro", "spark", "bride", "straw", "inbox", "bored", "chalk", "fatal", "hobby", "melee", "bagel", "debug", "amaze", "witch", "stool", "thief", "acorn", "hover", "lever", "merge", "lunar", "debit", "cubic", "erase", "vivid", "waist", "yeast", "syrup", "trunk", "rebel", "lobby", "pasta", "grape", "choir", "jewel", "scoop", "rival", "yacht", "sushi", "bunny"];
const hardWords = ["ability", "battery", "compare", "illness", "weather", "speaker", "package", "organic", "quickly", "regular", "premium", "musical", "journal", "healthy", "economy", "connect", "gallery", "illegal", "parking", "roughly", "success", "accused", "chronic", "unusual", "version", "setting", "message", "removal", "several", "dispute", "tourist", "avocado", "witness", "soldier", "monster", "habitat", "crystal", "younger", "analyze", "nervous", "precise", "trailer", "satisfy", "minimal", "fortune", "genuine", "bizarre", "exhibit", "gesture", "nucleus", "pivotal", "rainbow", "mustard", "lottery", "address", "network", "legally", "cartoon", "horizon", "induced"];

for (var i = 0; i < hardWords.length; i++) {
  for (var j = i+1; j < hardWords.length; j++) {
    if (hardWords[i] == hardWords[j]) {
      duplicate = hardWords[j]
      console.log(duplicate)
    }
  }
}

//VARIABLES

let turboTypingArray = [];
let word
let score = 0;
let attempts = 0;
let correctAttempts = 0;
let answerStreak = 0;
let highestAnswerStreak = 0;
let timeRemaining;
let myTimer;

//EVENT LISTENERS

var input = document.getElementById("user-input");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("input-word").click();
 };
});

document.getElementById("easy").onclick = setEasy;
document.getElementById("medium").onclick = setMedium;
document.getElementById("hard").onclick = setHard;

//FUNCTIONS

function init() {
  score = 0;
  attempts = 0;
  correctAttempts = 0;
  answerStreak = 0;
  highestAnswerStreak = 0;
  timeRemaining = 120;

  clearInterval(myTimer);

  document.getElementById("timer").innerHTML = "2:00";
  myTimer = setInterval(updateTimer, 1000);

  if (document.getElementById("board").classList.contains("game-over-lose")) {
    document.getElementById("board").classList.remove("game-over-lose");
  }

  if (document.getElementById("board").classList.contains("game-over-win")) {
    document.getElementById("board").classList.remove("game-over-win");
  }
}

function refresh() {

  var newWordBoard = "";

  turboTypingArray.forEach((item, i) => {
    newWordBoard += "<div class='board-word'>" +item + "</div>"
  });

  document.getElementById("board").innerHTML = newWordBoard;
}


function setEasy() {

init();

  turboTypingArray = easyWords.slice();



  document.getElementById("user-input").focus();
  refresh();
}



function setMedium() {

  init();

    turboTypingArray = mediumWords.slice();

    turboTypingArray.forEach((item, i) => {
      document.getElementById("board").innerHTML += "<div class='board-word'>" +item + "</div>"
    });

    document.getElementById("user-input").focus();
    refresh();
}


function setHard() {

  init();

    turboTypingArray = hardWords.slice();

    turboTypingArray.forEach((item, i) => {
      document.getElementById("board").innerHTML += "<div class='board-word'>" +item + "</div>"
    });

    document.getElementById("user-input").focus();
    refresh();
}


function CheckInput() {
  word = document.getElementById("user-input").value;

  if (turboTypingArray.includes(word)) {
   correctWord()

 }
 else {
   wrongWord();
 }

 document.getElementById("user-input").value = "";

refresh();
}



function correctWord() {

  answerStreak = answerStreak + 1;
  if (answerStreak > highestAnswerStreak) {
    highestAnswerStreak = answerStreak
  }
  score = score + 10 + answerStreak;
  attempts = attempts + 1;
  correctAttempts = correctAttempts + 1;


  for (var i = 0; i < turboTypingArray.length; i++) {
    if(turboTypingArray[i] == word) {
      turboTypingArray.splice(i, 1);
    }
  }

  checkDone();
}


function wrongWord() {
  attempts = attempts + 1;
  answerStreak = 0;
  alert("das wrong broke boi")
}


function checkDone() {
  if (turboTypingArray.length < 1) {
    score = score - (attempts - correctAttempts);
    alert("kfdskn")
    clearInterval(myTimer);
    gameWin();
  }
}


function gameOver() {

  document.getElementById("board").classList.add("game-over-lose");
  document.getElementById("board").innerHTML = "Score: " + score + "<br>Attempts: " + attempts + "<br>Correct Attempts: " + correctAttempts + "<br>Highest Answer Streak: " + highestAnswerStreak + "<br>Words Remaining: " + turboTypingArray.length + "/60";
}


function gameWin() {

  console.log("win");
  document.getElementById("board").classList.add("game-over-win");
  document.getElementById("board").innerHTML = "Score: " + score + "<br>Attempts: " + attempts + "<br>Correct Attempts: " + correctAttempts + "<br>Highest Answer Streak: " + highestAnswerStreak + "<br>Words Remaining: " + turboTypingArray.length + "/60";
}


function updateTimer() {

  timeRemaining--


if (timeRemaining > 60) {

  timerSeconds = timeRemaining - 60;
  timerDisplay = "1:" + timerSeconds;
}
 if (timeRemaining < 70) {
  timerSeconds = timeRemaining - 60
  timerDisplay = "1:0" + timerSeconds;


}

 if (timeRemaining < 60) {
  timerDisplay = "0:" + timeRemaining;
}

if (timeRemaining < 10) {
  timerDisplay = "0:0" + timeRemaining;
}

  if (timeRemaining < 1) {
    gameOver();
    clearInterval(myTimer);
  }
  document.getElementById("timer").innerHTML = timerDisplay;
}

body {
  text-align: center;
  font-family: "Roboto", monospace;
  color: white;
  background-color: black;

}


h1 {
  margin: 0 auto;
  font-family: "Major Mono Display", monospace;
  font-size: 48px;
  margin: 2%;
}

input {
  border-radius: 25px;
  height: 50px;
  width: 400px;
  font-family: "Major Mono Display", monospace;
  margin: auto;
  font-size: 37px;
  text-align: center;
}

button {
  background-color: black;
  color: white;
  height: 50px;
  width: 160px;
  font-size: 37px;
}

.difficulty-level {

  width: 100px;
  padding: 3px 0;
  margin: auto;;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
  color: black;

}

.board {
  height: 220px;
  width: 60px;
  margin-bottom: 10px;
}

.board-word {
  border: 1px solid white;
  height: 40px;
  width: 130px;
  margin: auto;
  text-align: center;
  font-size: 30px;
}

.user-input {
  margin-top: 10px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap {
  flex-wrap: wrap;
  height: 400px;
  width: 1400px;
}

.game-over-lose {

  background-color: rgb(255, 0, 0, 0.2);
  font-size: 40px;
  color: white;
}

.game-over-win {
  background-color: lightgreen;
  font-size: 40px;
  color: white;
}

#difficulty {
  margin-bottom: 10px;
  margin: auto;
  font-family: "Major Mono Display", monospace;
}

#easy {
  color: lightgreen;
  border: 1px solid lightgreen;
}

#medium {
  color: yellow;
  border: 1px solid yellow;
}

#hard {
  color: red;
  border: 1px solid red;
}

#board {
  margin: auto;

}

@font-face {
  font-family: "digital-clock";
  src: url("../fonts/digital-7.ttf");
}

#timer {
  font-size: 80px;
  font-family: "digital-clock"
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <link href="https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <script defer src="js/app.js"></script>
    <title>Turbo Typing</title>
  </head>
  <body>
    <h1>turbo typing</h1>

    <h2>Select a Difficulty</h2>

    <div id="difficulty" class="">
      <div id="easy" class="difficulty-level" >easy</div>
      <div id="medium" class="difficulty-level">medium</div>
      <div id="hard" class="difficulty-level">hard</div>

    </div>

    <div id="timer"></div>

    <div id="board" class="wrap container">

    </div>

    <div class='user-input'>
    <input id = "user-input" type = "text" value = "" />
  <button id="input-word" onclick="CheckInput()">Enter</button>
  </div>

    
  </body>
</html>

Answer 1

Must say, it was really hard to find the issue :D.

You are calling refresh() on every input check, it also gets called either on a gameOver() or gameWin(). I have set a flag, gameDone, if its true, I do not refresh. I set gameDone to true on gameWin() or gameOver() and reset it back in a refresh.

To test it out, select the "EASY" level and just enter "DOG".

//CONSTANTS
let duplicate;
const easyWords = ["dog"];
const mediumWords = ["house", "beach", "adult", "chief", "funny", "hello", "metal", "sauce", "cocoa", "flags", "upset", "pearl", "trash", "enemy", "pizza", "humor", "eagle", "flame", "cargo", "puppy", "retro", "spark", "bride", "straw", "inbox", "bored", "chalk", "fatal", "hobby", "melee", "bagel", "debug", "amaze", "witch", "stool", "thief", "acorn", "hover", "lever", "merge", "lunar", "debit", "cubic", "erase", "vivid", "waist", "yeast", "syrup", "trunk", "rebel", "lobby", "pasta", "grape", "choir", "jewel", "scoop", "rival", "yacht", "sushi", "bunny"];
const hardWords = ["ability", "battery", "compare", "illness", "weather", "speaker", "package", "organic", "quickly", "regular", "premium", "musical", "journal", "healthy", "economy", "connect", "gallery", "illegal", "parking", "roughly", "success", "accused", "chronic", "unusual", "version", "setting", "message", "removal", "several", "dispute", "tourist", "avocado", "witness", "soldier", "monster", "habitat", "crystal", "younger", "analyze", "nervous", "precise", "trailer", "satisfy", "minimal", "fortune", "genuine", "bizarre", "exhibit", "gesture", "nucleus", "pivotal", "rainbow", "mustard", "lottery", "address", "network", "legally", "cartoon", "horizon", "induced"];

for (var i = 0; i < hardWords.length; i++) {
  for (var j = i+1; j < hardWords.length; j++) {
    if (hardWords[i] == hardWords[j]) {
      duplicate = hardWords[j]
      console.log(duplicate)
    }
  }
}

//VARIABLES

let turboTypingArray = [];
let word
let score = 0;
let attempts = 0;
let correctAttempts = 0;
let answerStreak = 0;
let highestAnswerStreak = 0;
let timeRemaining;
let myTimer;
let gameDone = false;

//EVENT LISTENERS

var input = document.getElementById("user-input");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("input-word").click();
 };
});

document.getElementById("easy").onclick = setEasy;
document.getElementById("medium").onclick = setMedium;
document.getElementById("hard").onclick = setHard;

//FUNCTIONS

function init() {
  score = 0;
  attempts = 0;
  correctAttempts = 0;
  answerStreak = 0;
  highestAnswerStreak = 0;
  timeRemaining = 120;

  clearInterval(myTimer);

  document.getElementById("timer").innerHTML = "2:00";
  myTimer = setInterval(updateTimer, 1000);

  if (document.getElementById("board").classList.contains("game-over-lose")) {
    document.getElementById("board").classList.remove("game-over-lose");
  }

  if (document.getElementById("board").classList.contains("game-over-win")) {
    document.getElementById("board").classList.remove("game-over-win");
  }
}

function refresh() {
  gameDone = false;
  var newWordBoard = "";

  turboTypingArray.forEach((item, i) => {
    newWordBoard += "<div class='board-word'>" +item + "</div>"
  });

  document.getElementById("board").innerHTML = newWordBoard;
}


function setEasy() {

init();

  turboTypingArray = easyWords.slice();



  document.getElementById("user-input").focus();
  refresh();
}



function setMedium() {

  init();

    turboTypingArray = mediumWords.slice();

    turboTypingArray.forEach((item, i) => {
      document.getElementById("board").innerHTML += "<div class='board-word'>" +item + "</div>"
    });

    document.getElementById("user-input").focus();
    refresh();
}


function setHard() {

  init();

    turboTypingArray = hardWords.slice();

    turboTypingArray.forEach((item, i) => {
      document.getElementById("board").innerHTML += "<div class='board-word'>" +item + "</div>"
    });

    document.getElementById("user-input").focus();
    refresh();
}


function CheckInput() {
  word = document.getElementById("user-input").value;

  if (turboTypingArray.includes(word)) {
   correctWord()

 }
 else {
   wrongWord();
 }

 document.getElementById("user-input").value = "";
if (gameDone === false) {
  refresh();
}

}



function correctWord() {

  answerStreak = answerStreak + 1;
  if (answerStreak > highestAnswerStreak) {
    highestAnswerStreak = answerStreak
  }
  score = score + 10 + answerStreak;
  attempts = attempts + 1;
  correctAttempts = correctAttempts + 1;


  for (var i = 0; i < turboTypingArray.length; i++) {
    if(turboTypingArray[i] == word) {
      turboTypingArray.splice(i, 1);
    }
  }

  checkDone();
}


function wrongWord() {
  attempts = attempts + 1;
  answerStreak = 0;
  alert("das wrong broke boi")
}


function checkDone() {
  if (turboTypingArray.length < 1) {
    score = score - (attempts - correctAttempts);
    alert("kfdskn")
    clearInterval(myTimer);
    gameWin();
  }
}


function gameOver() {

  document.getElementById("board").classList.add("game-over-lose");
  document.getElementById("board").innerHTML = "Score: " + score + "<br>Attempts: " + attempts + "<br>Correct Attempts: " + correctAttempts + "<br>Highest Answer Streak: " + highestAnswerStreak + "<br>Words Remaining: " + turboTypingArray.length + "/60";
  gameDone = true;
}


function gameWin() {

  console.log("win");
  document.getElementById("board").classList.add("game-over-win");
  document.getElementById("board").innerHTML = "Score: " + score + "<br>Attempts: " + attempts + "<br>Correct Attempts: " + correctAttempts + "<br>Highest Answer Streak: " + highestAnswerStreak + "<br>Words Remaining: " + turboTypingArray.length + "/60";
  gameDone = true;
}


function updateTimer() {

  timeRemaining--


if (timeRemaining > 60) {

  timerSeconds = timeRemaining - 60;
  timerDisplay = "1:" + timerSeconds;
}
 if (timeRemaining < 70) {
  timerSeconds = timeRemaining - 60
  timerDisplay = "1:0" + timerSeconds;


}

 if (timeRemaining < 60) {
  timerDisplay = "0:" + timeRemaining;
}

if (timeRemaining < 10) {
  timerDisplay = "0:0" + timeRemaining;
}

  if (timeRemaining < 1) {
    gameOver();
    clearInterval(myTimer);
  }
  document.getElementById("timer").innerHTML = timerDisplay;
}

body {
  text-align: center;
  font-family: "Roboto", monospace;
  color: white;
  background-color: black;

}


h1 {
  margin: 0 auto;
  font-family: "Major Mono Display", monospace;
  font-size: 48px;
  margin: 2%;
}

input {
  border-radius: 25px;
  height: 50px;
  width: 400px;
  font-family: "Major Mono Display", monospace;
  margin: auto;
  font-size: 37px;
  text-align: center;
}

button {
  background-color: black;
  color: white;
  height: 50px;
  width: 160px;
  font-size: 37px;
}

.difficulty-level {

  width: 100px;
  padding: 3px 0;
  margin: auto;;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
  color: black;

}

.board {
  height: 220px;
  width: 60px;
  margin-bottom: 10px;
}

.board-word {
  border: 1px solid white;
  height: 40px;
  width: 130px;
  margin: auto;
  text-align: center;
  font-size: 30px;
}

.user-input {
  margin-top: 10px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap {
  flex-wrap: wrap;
  height: 400px;
  width: 1400px;
}

.game-over-lose {

  background-color: rgb(255, 0, 0, 0.2);
  font-size: 40px;
  color: white;
}

.game-over-win {
  background-color: lightgreen;
  font-size: 40px;
  color: white;
}

#difficulty {
  margin-bottom: 10px;
  margin: auto;
  font-family: "Major Mono Display", monospace;
}

#easy {
  color: lightgreen;
  border: 1px solid lightgreen;
}

#medium {
  color: yellow;
  border: 1px solid yellow;
}

#hard {
  color: red;
  border: 1px solid red;
}

#board {
  margin: auto;

}

@font-face {
  font-family: "digital-clock";
  src: url("../fonts/digital-7.ttf");
}

#timer {
  font-size: 80px;
  font-family: "digital-clock"
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <link href="https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <script defer src="js/app.js"></script>
    <title>Turbo Typing</title>
  </head>
  <body>
    <h1>turbo typing</h1>

    <h2>Select a Difficulty</h2>

    <div id="difficulty" class="">
      <div id="easy" class="difficulty-level" >easy</div>
      <div id="medium" class="difficulty-level">medium</div>
      <div id="hard" class="difficulty-level">hard</div>

    </div>

    <div id="timer"></div>

    <div id="board" class="wrap container">

    </div>

    <div class='user-input'>
    <input id = "user-input" type = "text" value = "" />
  <button id="input-word" onclick="CheckInput()">Enter</button>
  </div>

    
  </body>
</html>