Need Help on Basic HTML and JavaScript project

341
March 18, 2017, at 05:43 AM

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.

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

Answer 2

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>

Rent Charter Buses Company
READ ALSO
Why can&#39;t I capture events from an extended EventEmitter class in Node.js?

Why can't I capture events from an extended EventEmitter class in Node.js?

I've been banging my head against why I can't capture events emitted from this code in Nodejs

343
Upload typescript for javascript users with npm publish

Upload typescript for javascript users with npm publish

I have a small typescript snippet that I'd like people without typescript/scss to be able to useSo people with css and javascript only

399
ExtJS change position of default buttons in MessageBox (ExtJS 4.2.1)

ExtJS change position of default buttons in MessageBox (ExtJS 4.2.1)

If you use the code with the default buttons:

578
How to check if a page is served from a service worker?

How to check if a page is served from a service worker?

How can I test on client side if a page (request) is served by a service worker?

381