Results display in console but not on the browser

Question

I am creating a psychic game and when I inspect my code in Google Chrome and type my ID's I see the total of wins/losses and how many guesses left. However, I do not see the results in the browser. I think I'm missing something and cannot seem to isolate the actual issue.

I have pseudocode lines not needed, removed lines of code that may be the problem. search the internet for this issue. document.elementByID().innerHTML all of my if/else statements.

var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
var losses = 0;
var wins = 0;
var guessesLeft = 10;
var guessesSoFar = []; // capture user input
var psychicGuess;

document.onkeypress = function(event) {
  var userChoice = event.key;

  guessesSoFar.push(userChoice);
  var psychicGuess = letters[Math.floor(Math.random() * letters.length)];

  if (userChoice === psychicGuess) {
    wins++;
    guessesLeft = 10;
    guessesSoFar = [];

  } else if (guessesLeft == 0) {
    losses++;
    guessesLeft = 10;
    guessesSoFar = [];

  }
  if (userChoice !== psychicGuess) {
    guessesLeft--;
  }
}

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="UTF-8">
  <title>Psychic Game</title>
  <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>

<body>
  <div class="game">
    <h1>Psychic Game</h1>
    <br>
    <p> Guess what letters I'm thinking of:</p>
    <br>
    <p id="wins">Wins:</p>
    <br>
    <p id='losses'>Losses:</p>
    <br>
    <p id="left">Guesses Left: 10</p>
    <br>
    <p id="guesses">Guesses:</p>
  </div>
  <script src="assets/javascript/game.js"></script>
</body>

</html>

Inspect -> Console does product results when I type in wins/losses and guesses left.

1. Click [edit](https://stackoverflow.com/posts/56071351/edit) 2. Click the snippet editor `[<>]` and add relevant HTML and JS - we want a [mcve] and it is `document.getElementById("someID").innerHTML` you might be looking for — mplungjan, May 10 '19 at 05:43
This code looks good, but where is the code that updates the browser? I think the problem may be there... — jimf, May 10 '19 at 06:26
@mplungjan thank you! I have added my HTML. Thank you for the call out on the spelling. :D — Calib, May 10 '19 at 15:40
I think you should read about [DOM data binding in javascript](https://stackoverflow.com/q/16483560/6320039). This has great chances of solving your problem. — Ulysse BN, May 10 '19 at 15:50

Results display in console but not on the browser

0 Answers0