JQuery Set value on button click

Question

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

Roshni Bokade · Accepted Answer · 2016-03-04 16:18:19Z

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

Tony Hinkle · Accepted Answer · 2016-03-04 16:55:13Z

1

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

edited Mar 4, 2016 at 16:55

answered Mar 4, 2016 at 16:14

Tony Hinkle

4,7627 gold badges25 silver badges35 bronze badges

1 Comment

Harini Iyengar Over a year ago

Thank you ever so much for the advice and for helping, Tony Hinkle and Roshni Bokhade! Roshni's solution worked for me.

Collectives™ on Stack Overflow

JQuery Set value on button click

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related