CODEWITHSUNDEEP
jquerybuttoncounter
Harini Iyengar
Harini Iyengar

Reputation: 25

JQuery Set value on button click

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

Answers (2)

Tony Hinkle
Tony Hinkle

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

Roshni Bokade
Roshni Bokade

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

Related Questions