Reputation: 25
I'm a complete newbie to front end web development. I'm trying to design a simple game where I have a set of 3 images (bearing questions). Each image has 2 buttons underneath it marked 'Yes' and 'No'. The user needs to click on the correct button under each image to answer the question.
The correct answer for image 1 is 'No', for image 2 is 'No' and for image 3 is 'Yes'.
Below is my relevant HTML:
<div class="buttoncontainer">
<button id="submit-btn1" onclick="subtractone()">Yes!</button>
<button id="submit-btn2" onclick="addone()">No!</button>
</div>
<div class="buttoncontainer">
<button id="submit-btn3" onclick="subtractone()">Yes!</button>
<button id="submit-btn4" onclick="addone()">No!</button>
</div>
<div class="buttoncontainer">
<button id="submit-btn5" onclick="subtractone()">Yes!</button>
<button id="submit-btn6" onclick="addone()">No!</button>
</div>
<div class="scoresheet">
<p id="resultMessage"></p>
</div>
The idea is to display the score within scoresheet and display text based on the score.
Below is the JQuery I have so far managed. I would be very grateful for any assistance.
$(document).ready(function() {
var finalScore = 0;
console.log(finalScore);
$("#resultMessage").html("<p>" + finalScore + "</p>");
function subtractone(finalScore) {
finalScore = finalScore - 1;
$("#resultMessage").html("<p>" + finalScore + "</p>");
}
function addone(finalScore) {
finalScore = finalScore + 1;
$("#resultMessage").html("<p>" + finalScore + "</p>");
}
});
Upvotes: 0
Views: 1395
Reputation: 4742
The basic problem is that the inline onclick events can't find the functions that are being called. If you open the browser console (F12), you can see when you click a button that it can't find the function.
In general, it is better to keep all scripting out of your HTML, and a better way to handle this would be to assign "addone" and "subtractone" classes to the buttons, and then bind the click handlers to those classes:
HTML
<div class="buttoncontainer">
<button id="submit-btn1" class="subtractone">Yes!</button>
<button id="submit-btn2" class="addone">No!</button>
</div>
<div class="buttoncontainer">
<button id="submit-btn3" class="subtractone">Yes!</button>
<button id="submit-btn4" class="addone">No!</button>
</div>
<div class="buttoncontainer">
<button id="submit-btn5" class="addone">Yes!</button>
<button id="submit-btn6" class="subtractone">No!</button>
</div>
<div class="scoresheet">
<p id="resultMessage"></p>
</div>
Script
$(document).ready(function() {
var finalScore = 0;
console.log(finalScore);
$("#resultMessage").html("<p>" + finalScore + "</p>");
$(".subtractone").on("click", function() {
finalScore = finalScore - 1;
$("#resultMessage").html("<p>" + finalScore + "</p>");
});
$(".addone").on("click", function() {
finalScore = finalScore + 1;
$("#resultMessage").html("<p>" + finalScore + "</p>");
});
});
Upvotes: 1
Reputation: 343
<script type="text/javascript">
var finalScore = 0;
$(document).ready(function ()
{
$('form').submit(function () { return false; });
$("#resultMessage").html("<p>" + finalScore + "</p>");
});
function subtractone()
{
finalScore = finalScore - 1;
$("#resultMessage").html("<p>" + finalScore + "</p>");
}
function addone()
{
finalScore = finalScore + 1;
$("#resultMessage").html("<p>" + finalScore + "</p>");
}
</script>
<body>
<form id="form1">
<div>
<div class="buttoncontainer">
<button id="submit-btn1" onclick="subtractone()">
Yes!</button>
<button id="submit-btn2" onclick="addone()">
No!</button>
</div>
<div class="buttoncontainer">
<button id="submit-btn3" onclick="subtractone()">
Yes!</button>
<button id="submit-btn4" onclick="addone()">
No!</button>
</div>
<div class="buttoncontainer">
<button id="submit-btn5" onclick="addone()">
Yes!</button>
<button id="submit-btn6" onclick="subtractone()">
No!</button>
</div>
<div class="scoresheet">
<p id="resultMessage">
</p>
</div>
</div>
</form>
</body>
Upvotes: 1