Variable not incrementing how I'd like when html button clicked

Question

I'm trying to create a button that when pressed will display a list of cars that I like (just practising) and then along with that display images of said cars. If the button is pressed a second time or more then I'd like it to toggle on and off.

When I try to run it, the console log shows that the variable is incrementing but not in a way that I'd expect. These are two different ways that I have tried. I've tried some other ways but I'm unable to remember what exactly I've done.

I have an image with the code and the console log reports but due to not having any rep thus far on this site I can't post multiple pics so I'll post a cropped version along with the code below:

code with result

And the code:

function counter() 
{
    //clickCount += 1;
    console.log(clickCount + " before");
    return clickCount += 1;
}

function displayImages()
{
    //console.log(clickCount);
    if(counter() % 2 === 1) // if the click count is an odd number
    {
        console.log(clickCount);
        console.log("make images visible");
    }
    else // otherwise, hide the images. 
    {
        console.log("make images hidden");
    }
}

separated:

function counter() {
    clickCount += 1;
    console.log(clickCount + " before");
    return clickCount;
}

function displayImages()
{
    //console.log(clickCount);
    if(counter() % 2 === 1) // if the click count is an odd number
    {
        console.log(clickCount);
        console.log("make images visible");
    }
    else if(counter() % 2 !== 1)// otherwise, hide the images. 
    {
        console.log("make images hidden");
    }
}

the HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body>

        <p id="changeParagraph" onclick="changeColour(), changeText()">If you click this, the paragraph and text colour will change.<br /></p>
        <p id="favouriteCars">Click me to see my favourite cars!</p>
        <button type="button" id="clickMe" onclick="displayImages(), counter()">Click me</button>
        <button onclick="counter()">try it</button>

        <img src="https://i.wheelsage.org/pictures/subaru/impreza/autowp.ru_subaru_impreza_wrc_17.jpg" id="cars" style="display: none;"/>
        <img src="http://farm8.staticflickr.com/7009/6446244541_e165af10bc_o.jpg" id="cars" style="display: none;" />
        <img src="http://www.zastavki.com/pictures/originals/2015/Auto___Mitsubishi_White_sports_Mitsubishi_Lancer_Evolution_IX_097719_.jpg" id="cars" style="display: none;" />

        <link rel="stylesheet" href="StyleSheet.css" />
        <script type="text/javascript" src="JavaScript.js"></script>

    </body>
</html>

If any one could help that would be appreciated. Sorry if I have gone against any of the rules or if duplicated I have tried looking for something similar but couldn't find any info.

Kind regards

You're incrementing `clickCount`, but you never define that variable anywhere ` — adeneo, May 17 '16 at 00:45
Yeah sorry, I was shortening the code down and I forgot to add that I have that at the top of the file as a global variable. var clickCount = 0; — Shane O'Shea, May 17 '16 at 08:48

score 0 · Answer 1 · answered May 17 '16 at 01:00

The only clear difference I see between your two implementations is that you started with '1' in your first code block and '0' in your second.

This is because the first code block logs out clickCount before it returns the incrementation

score 0 · Answer 2 · answered May 17 '16 at 01:06

Your button is calling both displayImages() and counter() on this line:

<button type="button" id="clickMe" onclick="displayImages(), counter()">Click me</button>

but your displayImages() function is calling counter() too:

if(counter() % 2 === 1) // if the click count is an odd number

Since counter() increments the counter each call, that results in it incrementing twice per button click. Three times with your second version, which has an extra call to counter() on this line:

else if(counter() % 2 !== 1)// otherwise, hide the images.

Since you're working with only two states (cars visible or hidden) it would probably be better to use a bool variable and toggle it instead of using a counter.

var carsVisible = false; // initially invisible

function toggleImages()
{
    if(carsVisible) // if the cars are currently visible, hide them
    {
        console.log("make images hidden");
        carsVisible = false;
    }
    else // otherwise, show the images. 
    {
        console.log("make images visible");
        carsVisible = true
    }
}

And your button:

<button type="button" id="clickMe" onclick="toggleImages()">Click me</button>

score 0 · Answer 3 · edited May 23 '17 at 12:31

You can accomplish same with simpler code (I think this is what you are trying to do)

var show = false;

function toggle () {
  show = !show
  displayImages()
}

function displayImages() {
  if (show) {
    console.log('WOW nice Pictures!')
  } else {
    console.log('Where did they go???')
  }
}

toggle()
// logs 'WOW nice Pictures!'
toggle()
// logs 'Where did they go???'

Always declare variables, it's good practice and other things, see here declaring variables optional?

var show = false

when toggle is called it will set show to the reverse of what it currently is though the not operator(!) so

if show is true the !show is false and vice versa

if statements looks for a boolean(false, true)

so in the case that show = true if(show) is the same as if(show === true)

Hiya, thanks for the answer. This may well solve the problem, but it'd be great if you could add a short explanation of what is different, and why - don't forget that a lot of newbies come to Stack Overflow and what may be obvious to you may not be so for them. :) — Taryn East, May 17 '16 at 01:35

Variable not incrementing how I'd like when html button clicked

3 Answers3