JavaScript/jQuery - 多个Wack-a-Mole Qs :(增量分数，x/y定位，单击事件监听器 - 更正）

Question

我是一名初学者，很明显，我正在为一个课程工作。我设法通过我自己的网站& 1解决了1个步骤，但最后4个越来越混乱，我搜索了更多的问题，这些问题我整天和大部分时间都在做。我已经通过了W3Schools，TutorialsPoint和tizag.com，但仍然无法弄清楚。

下面是说明：

• 编写生成随机整数两个功能。一个函数应该返回0到300之间的数字（对于y定位），另一个函数应该返回0到600之间的数字（x定位）。从jQuery就绪函数中调用它们（暂时），并alert（）这些值。

• 在jQuery ready函数中，编写一些JavaScript/jQuery代码，它为button＃start_button添加一个jQuery click事件监听器。目前，添加一个alert（）来测试按钮点击是否正常。

• 创建一个函数（jQuery ready函数外部），它在调用时递增用户的分数并更新span＃分数中的HTML。提示：您应该创建一个全局变量来跟踪分数。

• 在Document Ready中调用您的分数增加功能以进行测试。

这就是我所拥有的。任何帮助将不胜感激。我很沮丧。

var mole='<img src="img/mole.jpg"/>' 
    var score=docutment.getElementById("#score"); 
    $(document).ready(function() { 
     $("#gamespace").show().html(mole); 
     $("#timer").show() 
     document.getElementById("start_button").addEventListener("click", myFunction); 
      function myFunction(){ 
       alert(Okay); 
      }; //end alert 
    }); //end.ready 
    function getRndInteger(min, max){ 
     var y=Math.floor((Math.random()*300)+1); 
      function click(){ 
       alert(y); 
      }; //end alert y 
    }; //end y 
    function getRndInteger(min, max){ 
     var x=Math.floor((Math.random()*600)+1); 
      function click(){ 
       alert(x); 
      }; //end alert x 
    }; //end x 
    function displayScore(){ 
     score.innerHTML= 
    }; //end score 

我想我应该添加其余的代码，如果有人什么来测试它。

<div id="content"> 

    <h1>Whack-A-Mole</h1> 

    <p>After clicking "start", you will have 30 seconds to click 
    as many moles as you can. The moles appear randomly so be ready! </p> 

    <div id="controls"> 
     <span id="score">0 pts</span> 
     <button type="button" id="start_button">Start!</button> 
    </div> 

    <div id="timer">30 seconds left</div> 

    <div id="gamespace"> 



    </div> 

</div> 

定了！

<script> 
    var mole='<img src="img/mole.jpg"/>'; 
    var score=0; 
    $(document).ready(function(){ 
     $("#gamespace").html(mole); 
     $("#score").click(increment); 
     $("#timer").show(); 
     $("#start_button").click(function(){ 
      alert("Okay"); 
      }); //end alert 
     alert(getRndNum()); 
     alert(getRndNumY()); 
    }); //end.ready 
    function getRndNum(min, max){ 
     var x=Math.floor((Math.random()*600)+1); 
      return x; 
    }; //end x 
    function getRndNumY(min, max){ 
     var y=Math.floor((Math.random()*300)+1); 
      return y; 
    }; //end y 
    function increment(){ 
     $("#score")[0].innerHTML=score; 
    }; //end increment 
</script> 

Answer 1

这里是你的代码的一些意见：

不要忘了终止与分号所有线路

var mole='<img src="img/mole.jpg"/>' 

确保您的拼写是否正确（“文件”是拼写错误）。

var score=docutment.getElementById("#score"); 

您还在这里混合使用jQuery和vanilla JavaScript。要获得使用香草JavaScript中的元素，你这样写（注意缺少＃符号）：

var score = document.getElementById('score'); 

而使用jQuery你可以这样写：

var score = $('#score'); 

“#gamespace”和' #timer'已经可见，所以不需要在它们上调用.show（）。

$("#gamespace").show().html(mole); 
$("#timer").show() 

同样，你可以在这里使用jQuery：

// JavaScript 
document.getElementById("start_button").addEventListener("click", myFunction); 

// jQuery 
$('#start_button').click(myFunction); 

这将寻找一个名为好的变量。如果你想显示文字'好'，你需要用引号包起来。

function myFunction(){ 
    alert(Okay); 
}; //end alert 

在这里，你定义了两个同名的函数，所以你的第二个函数覆盖了你的第一个函数。

function getRndInteger(min, max){ 
    // do stuff... 
}; //end y 
function getRndInteger(min, max){ 
    // do stuff... 
}; //end x 

你也没有从函数返回任何值。你正在定义一个名为'click'的函数，但你永远不会调用它或将它绑定到任何东西。你还需要两个你不用的参数（最小和最大）。

function getRndInteger(min, max){ 
    var y=Math.floor((Math.random()*300)+1); 
     function click(){ 
      alert(y); 
     }; //end alert y 
}; //end y 

要编写一个能够返回一个0值到300的功能，你可以这样做：

function randomX(){ 
    var x = Math.floor(Math.random()*300); 
    return x; 
} 

你可以提醒randomX的结果通过写

alert(randomX()); 

我希望能够帮助您清理已有的代码，jQuery documentation非常有帮助，它会告诉您需要传递给某些功能的参数，它们的功能以及它们的功能会回来的。