How to count clicks using JavaScript? [duplicate]

Try this code:

<script type="text/javascript">
var clicks = 0;

function check() {
    if (clicks==1) {
        changeDiv();
    } else if(clicks==2) {
        changetwoDiv();
    }
}

function changeDiv()
{
    document.getElementById('body').style.display = "none"; // hide body div tag
    document.getElementById('body1').style.display = "block"; // show body1 div tag
    document.getElementById('innerbody').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}

function changetwoDiv()
{
    document.getElementById('body1').style.display = "none";
    document.getElementById('body2').style.display = "block";
}
</script>

<div class="footerlinks">
<ul>
    <li class="numlink1"><a href="index.html" target="_blank">&lt;&lt;Back</a></li>
    <li class="link2"><a href="#" onclick="clicks++;check();">&gt;&gt;Next</a></li>

</ul>

I'm not sure what you did there, but after you create you're function you should call it, so what I did above I created the functions, and then when you click on the Next link it will add one to the clicks variable and call the function check() that will determin what to do with the number of clicks.

Two major problems here:

1. Don't define functions inside if/else blocks, that's not reliable.
2. The only thing that happens on every click is getting the counter incremented, nothing else.

I believe you want something like this:

var clicks = 0;

function clicked() {
    clicks++;
    if (clicks==1) {
        changeDiv();
    } else if (clicks==2) {
        changetwoDiv();
    }
}

function changeDiv() {
    document.getElementById('body').style.display = "none"; // hide body div tag
    document.getElementById('body1').style.display = "block"; // show body1 div tag
    document.getElementById('innerbody').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}

function changetwoDiv() {
    document.getElementById('body1').style.display = "none";
    document.getElementById('body2').style.display = "block";
}

HTML:

<div class="footerlinks">
<ul>
    <li class="numlink1"><a href="index.html" target="_blank">&lt;&lt;Back</a></li>
    <li class="link2" onClick="clicked()">&gt;&gt;Next</li>

</ul>

Try this for your javascript:

var clicks = 0;

function next_clicked() {

     clicks++;

     if( clicks == 1 ) { changeDiv(); }
     else if( clicks == 2 ) { changetwoDiv(); }

}

function changeDiv()
{
    document.getElementById('body').style.display = "none"; // hide body div tag
    document.getElementById('body1').style.display = "block"; // show body1 div tag
    document.getElementById('innerbody').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}

function changetwoDiv()
{
    document.getElementById('body1').style.display = "none";
    document.getElementById('body2').style.display = "block";
}

and then in your html code:

<li class="link2" onClick="javascript:next_clicked()">&gt;&gt;Next</li>

Your JavaScript code is executed only once when it's loaded, like this:

1. User loads page
2. Code (if-else-block) gets executed, but does nothing since counter is 0
3. User clicks button, counter counts, but if-else-block will not be executed again

You have to make sure that the if-else-block is called everytime the user clicks the button.

Change the onClick event of your <li> to call a function (I'll call it count() below). Then create this function in your code and put the relevant stuff in there.

HTML:

<li class="link2" onClick="count()">&gt;&gt;Next</li>

JavaScript:

var clicks = 0; // This needs to stay outside the function!

function count() {
    clicks++;
    if (clicks == 1) {
        // Do something
    } else if (clicks == 2) {
        // Do something else
    }
}