Hangman Game - can't make the loop stop deducting lives - works otherwise

As a couple other folks here, I am trying to build a hangman game for class. All things work more or less fine, but somehow I am struggling to stop the script when lives === 0. The script keeps running and just keeps deducting lives...

I tried to append the if statement in several ways, but must be missing something...

Could somebody take a look and help me understand what I am doing wrong?

Git-Hub

 
var word = "Flower";
var gameOptions = ["Flower", "Fruit", "Table", "Chair", "Love", "Family", "Water", "Picture", "Refrigerator", "Giraffe"]
 // The word we will use to play, will be randomized later
var gameOptionsLength; // The comptuer needs to know the length of the array, so we can set the upper limit for the random function
var computerChoice; // Computer will pick random word from gameOptions array
var gameWord; // This variable will transform the computer choosen string into an upper case string
var gamewordLength; // In order to show the right character amout to be guessed, we need to know the word length
var blanks= "";
var winword="";
var userInput;
var lives = 6; // According to Wikipedia, the user has 6 lives
var alphabet;
var outputElement;
var guessedLetters = []; // stores the letters the user guessed

gameOptionsLength = gameOptions.length;

computerChoice=gameOptions[Math.floor(Math.random() * gameOptionsLength)];
        console.log("computer choice " + computerChoice);

gameWord = computerChoice.toUpperCase();
gamewordLength = gameWord.length;

var j = 0;  // Creates the blanks i.e. Flower has 6 characters and needs 6 blanks _ _ _ _ _ _
while (j < gamewordLength) {
    blanks += " _";
    j++;
   }

var j = 0;  // Creates the blanks i.e. Flower has 6 characters and needs 6 blanks _ _ _ _ _ _
while (j < gamewordLength) {

    winword += " "+ gameWord.charAt(j);
    j++;



alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
outputElement = $('#guessed-letters');


$(document).on('keyup', function (event) {
  var key = event.key.toLowerCase();
  if (alphabet.indexOf(key) !== -1) {
    // the key is a letter in the alphabet
    if (guessedLetters.indexOf(key) === -1) {
      // the key has not been guessed
      guessedLetters.push(key);
      var string = guessedLetters.join(''); // join the letters together to one single string
      outputElement.text(string);
    }
  }
});


var paragraph = document.getElementById("demo").innerHTML = "The word you are looking for has " + gamewordLength + " characters, can you guess it?";
var paragraph1 = document.getElementById("blanks").innerHTML =  "Word:"+blanks;
var pLives = document.getElementById("pLives").innerHTML = " Lives: " + lives;

document.onkeyup = function(event){
      userInput = event.key;
      userInput = userInput.toUpperCase();

      console.log("the userInput is " + userInput) // 
      
  

    var index = gameWord.indexOf(userInput);

        if (index >= 0) { 
        for (var i = 0; i < gamewordLength; i++){
        console.log("Here is the gamword from within the loop:" + " "+ blanks); 
        var index = gameWord.indexOf(userInput,i); // indexOf checks whether a character is within a string, if the character exists the return value is >=0
        console.log(index);
        console.log("that works, the right position is " +index);
                blanks = blanks.split('');
                blanks[index*2+1] = userInput; 
                blanks = blanks.join('');
                console.log("here are the new blanks:" + " "+ blanks);
                var paragraph1 = document.getElementById("blanks").innerHTML =  "Word:"+blanks;
                                
        }}


         else {  
        // deducting lives if indexOf === -1, as the user selected character does not exist in the string
                lives = lives -1;
                console.log("lives = " +lives)
                var pLives = document.getElementById("pLives").innerHTML = " Lives: " + lives;
        }


        if (lives === 0){
                var gameOver = document.getElementById("gameOver").innerHTML = " GameOver - refresh the site to play again!";
                }
        
                                
        else if (blanks === winword) {
                var winner = document.getElementById("winner").innerHTML = "Well done, you guessed the right word!!";
        }

}}

<!DOCTYPE html>
<html>
<head>
        <title>Hangman Game</title>
        <link rel="stylesheet" href="assets/css/style.css">
          <script type="text/javascript" src="http://ift.tt/2n9t8Vj"></script>


</head>
<body>

<h1>Hangman</h1>
<p id="demo"></p> 
  <!-- Js includes the following text: The word you are looking for has " + gamewordLength + " characters, can you guess it?"; -->
 <h1 id="blanks"></h1> <!-- If word is "Love", there will be 4 - - - -  -->
 <h1 id="pLives"></h1> <!-- Lives:  -->
 <h1 id="gameOver"></h1> <!-- GameOver -->
 <h1 id="winner"></h1> <!--Winner -->
 <h3>You already used the following letters:</h3>
 <h3 id="guessed-letters"></h3> <!--Displays used letters -->

<!-- <div id="display"></div>
  <div id="buttons"></div>
  <div id="AllKeys">
  <button id="allButtons">A</button> -->

 </div>

<script src="assets/javascript/game.js"></script>

</body>
</html>