After setInterval( ) on click function will not work...Variable no longer increments

Question

The code works for the most part.

Whenever the interval is set to refresh the game card, the onclick functions no longer work and the variable no longer increments.

What am I missing here?

You Can comment out the line with the setInterval() to see the desired outcome. It should refresh every second keeping the variable score and incrementing whenever someone clicks on the images. Thanks!

 // var btn = document.getElementById('btn');

 //btn.addEventListener('click', UpdateTable);

 // Set the max length and Width
 var maxWidth = 4;
 var maxLength = 6;

 // Returns a random number
 function CreateRandom() {
   return Math.floor(Math.random() * 2 + 1);
 }

 //function to create an image
 function CreateGopher() {
   var randomNumber = CreateRandom();
   var image = "Sup";

   if (randomNumber == 1) {
     image = "<img src='gopher.jpg' class='gopher' height='100' width='100'>";
   } else if (randomNumber == 2) {
     image = "<img src='lettuce.jpg' class='lettuce' height='100' width='100'>";
   }

   return image;
 }

 //create table
 function UpdateTable() {
   // Iterate over each cell and set a random number
   for (var i = 0; i < maxLength; i++) {
     for (var j = 0; j < maxWidth; j++) {
       tmp = 'cell' + i + j;
       document.getElementById(tmp).innerHTML = CreateGopher();
     }
   }
 }

 function newTable() {
   // Iterate over each cell and set a random number
   for (var i = 0; i < maxLength; i++) {
     for (var j = 0; j < maxWidth; j++) {
       tmp = 'cell' + i + j;
       document.getElementById(tmp).innerHTML = CreateGopher();
     }
   }
 }

 //Use The function update table
 UpdateTable();

 setTimeout(function() {
   alert("Your Score is " + score)
 }, 15000);

 setInterval(UpdateTable, 1000);


 var score = 0;

 $(".lettuce").click(function() {
   //alert( "You Clicked on the lettuce" );
   score -= 5;

   document.getElementById("scoreOut").innerHTML = score;
 });

 $(".gopher").click(function() {
   //alert( "You Clicked on the lettuce" );
   score += 5;

   document.getElementById("scoreOut").innerHTML = score;
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<center>
  <div id="container">
    <div id="header">
      <h1>Welcome</h1>
      <div id="scoreOut"></div>
    </div>
    <div id="content">
      <table id="gameCard">
        <tbody>
          <tr>
            <td id="cell00">&nbsp;</td>
            <td id="cell01">&nbsp;</td>
            <td id="cell02">&nbsp;</td>
            <td id="cell03">&nbsp;</td>
          </tr>
          <tr>
            <td id="cell10">&nbsp;</td>
            <td id="cell11">&nbsp;</td>
            <td id="cell12">&nbsp;</td>
            <td id="cell13">&nbsp;</td>
          </tr>
          <tr>
            <td id="cell20">&nbsp;</td>
            <td id="cell21">&nbsp;</td>
            <td id="cell22">&nbsp;</td>
            <td id="cell23">&nbsp;</td>
          </tr>
          <tr>
            <td id="cell30">&nbsp;</td>
            <td id="cell31">&nbsp;</td>
            <td id="cell32">&nbsp;</td>
            <td id="cell33">&nbsp;</td>
          </tr>
          <tr>
            <td id="cell40">&nbsp;</td>
            <td id="cell41">&nbsp;</td>
            <td id="cell42">&nbsp;</td>
            <td id="cell43">&nbsp;</td>
          </tr>
          <tr>
            <td id="cell50">&nbsp;</td>
            <td id="cell51">&nbsp;</td>
            <td id="cell52">&nbsp;</td>
            <td id="cell53">&nbsp;</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <br>

  //<input id="btn" type="button" value="Play The Game!!" />

</center>

Missing the declaration of the `tmp` variable? `var tmp = 'cell' + i + j;`? — boumbh, Jul 23 '15 at 08:09
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — JJJ, Jul 23 '15 at 08:21
@Juhana although the solution mentioned could work, the issue is caused because of the recreation of the dom elements with the initial event handlers. — melc, Jul 23 '15 at 08:33

score 0 · Answer 1 · answered Jul 23 '15 at 09:13

Figured it out!

Needed to put my JQUERY on.click goodies in the actual main function, which I did not have in the first place, in with the other functions nested in it.

<!--
To change this template use Tools | Templates.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Gopher Broke</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

   <style>
    #gameCard td{
   padding:0; margin:0;
}

#gameCard {
   border-collapse: collapse;
   cursor:url(finger2.png), pointer;
}

    </style>

</head>
<body>
<center>
    <div id="container">
        <div id="header">
             <h1>GOPHER BROKE</h1>
             <center>You have 15 seconds to stop as many gophers as possible!</center>


             <div id="scoreOut">Score:</div>
            <FORM>
            <INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
            </FORM>
        </div>
        <div id="content">



            <table  id="gameCard">
                <tbody>

                    <tr>
                        <td id="cell00">&nbsp;</td>
                        <td id="cell01">&nbsp;</td>
                        <td id="cell02">&nbsp;</td>
                        <td id="cell03">&nbsp;</td>
                    </tr>
                    <tr>
                        <td id="cell10">&nbsp;</td>
                        <td id="cell11">&nbsp;</td>
                        <td id="cell12">&nbsp;</td>
                        <td id="cell13">&nbsp;</td>
                    </tr>
                    <tr>
                        <td id="cell20">&nbsp;</td>
                        <td id="cell21">&nbsp;</td>
                        <td id="cell22">&nbsp;</td>
                        <td id="cell23">&nbsp;</td>
                    </tr>
                    <tr>
                        <td id="cell30">&nbsp;</td>
                        <td id="cell31">&nbsp;</td>
                        <td id="cell32">&nbsp;</td>
                        <td id="cell33">&nbsp;</td>
                    </tr>
                    <tr>
                        <td id="cell40">&nbsp;</td>
                        <td id="cell41">&nbsp;</td>
                        <td id="cell42">&nbsp;</td>
                        <td id="cell43">&nbsp;</td>
                    </tr>
                    <tr>
                        <td id="cell50">&nbsp;</td>
                        <td id="cell51">&nbsp;</td>
                        <td id="cell52">&nbsp;</td>
                        <td id="cell53">&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <br>

    <!--<input id="btn" type="button" value="Play The Game!!" />-->

</center>

        <script>

            var score = 0;

            function game(){

       // var btn = document.getElementById('btn');

        //btn.addEventListener('click', UpdateTable);



// Set the max length and Width
var maxWidth = 4;
var maxLength = 6;


// Returns a random number
function CreateRandom() {
    return Math.floor(Math.random() * 4 + 1);
}



//function to create an image
function CreateGopher() {

    var randomNumber = CreateRandom();
    var image = "Sup";

    if(randomNumber == 1){
        image = "<img src='gopher.jpg' class='gopher' height='50' width='50'>";
    }
    else if(randomNumber == 2){
        image = "<img src='lettuce.jpg' class='lettuce' height='50' width='50'>";
    }
     else if(randomNumber == 3){
        image = "<img src='lettuce.jpg' class='lettuce' height='50' width='50'>";
    }
     else if(randomNumber == 4){
        image = "<img src='lettuce.jpg' class='lettuce' height='50' width='50'>";
    }

    return image;
}


//create table
function UpdateTable() {
    // Iterate over each cell and set a random number
    for (var i = 0; i < maxLength; i++) {
        for (var j = 0; j < maxWidth; j++) {
            tmp = 'cell' + i + j;
            document.getElementById(tmp).innerHTML = CreateGopher();
        }
    }



}

function newTable() {
    // Iterate over each cell and set a random number
    for (var i = 0; i < maxLength; i++) {
        for (var j = 0; j < maxWidth; j++) {
            tmp = 'cell' + i + j;
            document.getElementById(tmp).innerHTML = CreateGopher();
        }
    }



}

//Use The function update table
UpdateTable();





        $( ".lettuce" ).click(function() {
          //alert( "You Clicked on the lettuce" );
          score -= 5;

          document.getElementById("scoreOut").innerHTML = "<h1>Score :" + score;

        });

         $( ".gopher" ).click(function() {
          //alert( "You Clicked on the lettuce" );
          score += 5;

          document.getElementById("scoreOut").innerHTML = "<h1>Score :" + score;

        });

            }


    game();        
    setInterval(game, 1000);
    setTimeout(function () 

               {alert("Your Score is " + score)
                window.location.href = "startGame.html";  

                           }, 16000);        

    </script>




</body>
</html>

After setInterval( ) on click function will not work...Variable no longer increments

1 Answers1