Trying to have a number increment when div is clicked

Question

I’m new to HTML, CSS, and JavaScript, and this website. I am learning them in school. I was just wondering how I would make a number increment using a function and accessing the function in HTML? For example, my JS is:

function pagenumber() {
  page = page+1;
}

And my HTML where I try to make the function do its thing is:

<div class="Begin" id="Begin" onclick="showbegin(); pagenumber()">

Please remove the semicolons after each attribute. They don’t belong there at all. You can’t have two attributes with the same name. You can merge the two `onclick`s together like this: `onclick="showbegin(); pagenumber()"`. — Sebastian Simon, Aug 21 '15 at 22:14
Thanks Xufox, I'll do it now :) I didn't expect replies so fast... This is a good site. — Gary Whittle III, Aug 21 '15 at 22:17

score 1 · Answer 1 · edited Aug 21 '15 at 22:18

1

<div class="Begin" id="begin" onclick="showbegin()"> </div>

<script>
   var count= 0;
   function showbegin(){
       count++;
       document.getElementById("begin").innerText= count;
   }
</script>

edited Aug 21 '15 at 22:18

Sebastian Simon

18,263
7
55
75

answered Aug 21 '15 at 22:15

Rajeev

312
3
10

2

While this answer is probably correct and useful, it is preferred if you [include some explanation along with it](http://meta.stackexchange.com/q/114762/159034) to explain how it helps to solve the problem. This becomes especially useful in the future, if there is a change (possibly unrelated) that causes it to stop working and users need to understand how it once worked. – Kevin Brown-Silva Aug 22 '15 at 01:18

Data · Accepted Answer · 2015-08-22T01:45:31.617

jsfiddle

<div class="Begin" id="Begin" onclick="pagenumber()">
    Page Num - Click Me 
</div>

<script>
    /*
      page variable sits on window object and is considered global
      it's scope is accessible from anywhere, so global vars are dangerous
    */ 
    var page = 0;

    function pagenumber() {

        /*
           now inside the function, totClicks has only the function scope
           two ways to increment ++page or page++.
           page++ returns the current page value and then adds one
           ++page adds one first and then returns the new value
           we'll use ++page because it's a new click, so add one and return the new total
        */
        var totClicks = ++page;

        // update div with id = 'Begin'
        document.getElementById("Begin").innerHTML = "YOU CLICKED ME! " + totClicks;
    }

</script>

You're welcome; I was going to mention an IIFE (http://stackoverflow.com/q/8228281/1837472) because the page variable sits on the window object, i.e. global...but baby steps :) — Data, Aug 21 '15 at 23:04

score 0 · Answer 3 · answered Aug 22 '15 at 00:58

This is much simpler than you are being led to believe. You can simply use the JavaScript increment prefix (++) to increment the variable directly from the onclick attribute.

In this example I've used a button to simulate a clickable element, and I've wrapped the onclick attribute in a console.log() wrapper to show you that the number is being increased. Both of these things can be changed.

var page = 0;

<button onclick="console.log(++page)">Increment Page</button>

Trying to have a number increment when div is clicked

3 Answers3