Create a function (outside the jQuery ready function) which increments the user\
ID: 3599414 • Letter: C
Question
Create a function (outside the jQuery ready function) which increments the user's score when called and updates the HTML in span#score. Hint: You should create a global variable to keep track of the score.
Call your score increment function within Document Ready for testing purposes. ***I need to 0 pts to update to 20 pts***
Below is the code that I have so far***************
<!DOCTYPE html>
<html>
<head>
<title>Whack-A-Mole (CSCI2447)</title>
<!-- CSS styles: This is for me to worry about; not you. -->
<link href="css/game.css" rel="stylesheet" />
<script src="js/jquery-3.2.1.min.js"></script>
<script>
var mole='<img src="img/mole.jpg"/>';
var score = $('#score');
$(document).ready(function(){
$("#gamespace").html(mole);
$("#timer").show();
$("#start_button").click(myFunction);
function myFunction(){
alert("Okay");
alert(getX()+","+getY());
}; //end alert
}); //end.ready
function getY(min, max){
var y=Math.floor((Math.random()*300)+1);
return y;
}; //end y
function getX(min, max){
var x=Math.floor((Math.random()*600)+1);
return x;
}; //end x
function displayScore(){
score.innerHTML= ;
}; //end score
</script>
</head>
<body>
<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>
</body>
</html>
Whack-A-Mole After clicking "start",you will have 30 seconds to click as many moles as you can. The moles appear randomly so be ready! o pts 30 seconds leftExplanation / Answer
the code so far correct and changed
<!DOCTYPE html>
<html>
<head>
<title>Whack-A-Mole (CSCI2447)</title>
<!-- CSS styles: This is for me to worry about; not you. -->
<link href="css/game.css" rel="stylesheet" />
<script src="js/jquery-3.2.1.min.js"></script>
<script>
var mole='<img src="img/mole.jpg"/>';
var score = $('#score');
$(document).ready(function(){
$("#gamespace").html(mole);
$("#timer").show();
$("#start_button").click(myFunction);
function myFunction(){
alert("Okay");
alert(getX()+","+getY());
}; //end alert
}); //end.ready
function getY(min, max){
var y=Math.floor((Math.random()*300)+1);
return y;
}; //end y
function getX(min, max){
var x=Math.floor((Math.random()*600)+1);
return x;
}; //end x
function displayScore(){
score.innerHTML= ;
}; //end score
</script>
</head>
<body>
<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>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.