单击函数上的setInterval（）后将无效...变量不再递增

Question

代码大部分都有效。

每当间隔设置为刷新游戏卡时，onclick功能不再起作用，变量不再增加。

我在这里缺少什么？

您可以使用setInterval（）注释掉该行，以查看所需的结果。每当有人点击图像时，它应该每秒刷新一次，保持变量得分并递增。谢谢！

＆＃13;

＆＃13;

 // 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;
 });

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

想出来！

需要把我的JQUERY on.click好东西放在实际的main函数中，这是我首先没有的，其他函数嵌套在其中。

{{1}}