Need Help on Basic HTML and JavaScript project

Question

I want to make a webpage that, when you click, it adds a point. I also want that, when A checkbox is checked, each click adds 5 points. I tried this code, but it doesn't seem to be working:

    <!DOCTYPE html>
    <html>
        <head>
        <title>Click to add points!</title>
        <script type="text/javascript">
        var hey = 3;
        var points = 0;
        function addPoint(number)
        {   
        points = points + number;
        document.getElementById("points").innerHTML = points;
        };  
        function checkBox()
        {
        var chkBox = document.getElementById("extraPoints").checked;
        }
        </script>
        </head>
        <html onclick="
        checkBox();
        if (chkBox == true)
        {
        addPoint(5);
        }
        else
        {
        addPoint(1);
        }">
        <body>
        <p align="center">Points: <span id="points">0</span></p>
        <p align="center"><input type="checkbox" id="extraPoints" /></p>
        <p id="writeHere"></p>
        </body>
    </html>

I would also like to point out that I can't use jQuery. Thank you in advance.

hi doggo, how u doin

Bartek Pacia
– Bartek Pacia

2020-04-19 23:23:06 +00:00
Commented Apr 19, 2020 at 23:23 — Bartek Pacia
– Bartek Pacia, Commented Apr 19, 2020 at 23:23
@BartekPacia lol how tf did you find this

Diogo SCF
– Diogo SCF

2020-07-30 23:01:30 +00:00
Commented Jul 30, 2020 at 23:01 — Diogo SCF
– Diogo SCF, Commented Jul 30, 2020 at 23:01
@doggo ( ͡° ͜ʖ ͡°)

Bartek Pacia
– Bartek Pacia

2020-07-31 13:41:02 +00:00
Commented Jul 31, 2020 at 13:41 — Bartek Pacia
– Bartek Pacia, Commented Jul 31, 2020 at 13:41
It's nice to see how far I've gotten in 3 years lol

Diogo SCF
– Diogo SCF

2020-07-31 15:46:36 +00:00
Commented Jul 31, 2020 at 15:46 — Diogo SCF
– Diogo SCF, Commented Jul 31, 2020 at 15:46
yeah. at least you stopped using "var"

Bartek Pacia
– Bartek Pacia

2020-07-31 18:16:58 +00:00
Commented Jul 31, 2020 at 18:16 — Bartek Pacia
– Bartek Pacia, Commented Jul 31, 2020 at 18:16

Nina Scholz · Accepted Answer · 2017-03-17 22:01:09Z

1

You could move the adding part inside of checkBox.

function addPoint(number) {
    points = points + number;
    document.getElementById("points").innerHTML = points;
};

function checkBox() {
    var chkBox = document.getElementById("extraPoints").checked;
    addPoint(chkBox ? 5 : 1); 
}

var hey = 3;
var points = 0;

<html onclick="checkBox();">
<p align="center">Points: <span id="points">0</span></p>
<p align="center"><input type="checkbox" id="extraPoints" /></p>
<p id="writeHere"></p>

answered Mar 17, 2017 at 22:01

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Diogo SCF Over a year ago

You helped me a lot! Thank you!

kind user · Accepted Answer · 2017-03-17 22:01:39Z

1

Use following approach.

Note: You can adjust the added points as you wish.

var points = 0, //initial value 
    elem = document.getElementById('points'), //get span holding the value
    box = document.getElementById('extraPoints'); //get the checkbox

    document.addEventListener('click', function(){ //add click event on whole document
       box.checked ? points += 5 : points += 1 //if checkbox checked, add +5 - if not, add +1
       elem.innerHTML = points; //actualize the value in the span
    });

<p align="center">Points: <span id="points">0</span></p>
<p align="center"><input type="checkbox" id="extraPoints" /></p>
<p id="writeHere"></p>

answered Mar 17, 2017 at 22:01

kind user

42k8 gold badges69 silver badges78 bronze badges

Collectives™ on Stack Overflow

Need Help on Basic HTML and JavaScript project

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related