JavaScript: Count Total # of button clicks from Multiple buttons?

Question

I'm trying to make the background change images based on the number of clicks I need (I know the code is not great since I have to state for every picture, but I only need 4 images because only 3 total button clicks from any of the 3 buttons are needed). Basically, I have a set of 3 buttons, and what I would like my code to do is to change background images based on the total amount of clicks from all three. Please suggest jQuery if you wish, but I don't want to use jQuery because I'd rather get used to JavaScript first. The JavaScript function doesn't seem to count anything, and it did work for only one button. Thanks! :)

    <!DOCTYPE html>
    <html>
    <body>

    <script language="JavaScript" type="text/javascript"> 

    var noOfInputs = 0;
    function buttons_click () {

        noOfInputs++;

        if(noOfInputs === "0") {
            window.document.getElementById('myImage').src="Number0.jpg";
        }

        if(noOfInputs === "1") {
            window.document.getElementById('myImage').src="Number1.jpg";
        }

        if(noOfInputs === "2") {
            window.document.getElementById('myImage').src="Number2.jpg";
        }

        if(noOfInputs === "3") {
            window.document.getElementById('myImage').src="Number3.jpg";
        }

    }

    </script>

    <button>1</button>
    <button>2</button>
    <button>3</button>

    <img id="myImage" src="Number0.jpg" style="width:400px">

    <button onclick="document.getElementById('myImage').src='Number0.jpg'">Cancel</button>

    </body>
    </html>

Please go easy on me...I'm very prone to beginner mistakes (cause I'm a beginner). All help is greatly appreciated :)

What is working and what is not working with your code ? What are you waiting us to do ? Can you be more explicit ? — Anthony Granger, Mar 19 '17 at 15:38
I'm trying to get the function buttons_click to work. Sorry about that. — Grace C., Mar 19 '17 at 15:40
The conditions in your `if` statements will always be `false`, you're comparing a number to a string using `===`. What you need to do after you fix that is to call the `buttons_click` function every time a button is clicked. You can find a good example here http://stackoverflow.com/questions/7556564/vanilla-javascript-version-of-jquery-click — Titus, Mar 19 '17 at 15:43
`onclick="document.getElementById('myImage').src='Number0.jpg'"` - note that you don't reset `noOfInputs` to `0` here. — Tarwirdur Turon, Mar 19 '17 at 15:43
Thanks so much everyone! The fix was much easier than I expected, I thought it was the entire function that was wrong. (I know thanks aren't supposed to be here, but I gotta thank everyone SOMEWHERE!!! — Grace C., Mar 19 '17 at 16:20

Anthony Granger · Answer 1 · 2017-03-19T15:57:09.487

0

Just call your function when the user click your button :

<button onclick="buttons_click()">Cancel</button>

Edit : Oh also, replace all your numbers-as-a-string ("0", "1", etc) by real numbers (0, 1, 2, etc). This is because the === will check for value and type. So if 2 variables got the same value (1 == "1" in JS, yes...) but not same type, it will returns FALSE.

edited Mar 19 '17 at 15:57

answered Mar 19 '17 at 15:42

Anthony Granger

784
9
23

I see...I found that was what caused the code from Vindhyachal to work while mine didn't. – Grace C. Mar 19 '17 at 16:18
Ahah yeah, he gave you the solution, I gave you why the solution work ;) – Anthony Granger Mar 19 '17 at 19:37

Pineda · Answer 2 · 2017-03-19T15:58:43.053

Suggested solution:

It is possible to assign the buttons_click function as a callback handler for the button element's on click event as follows:
<button onclick="button_click()">Cancel</button>

Extra tip:

You can also shorten the button_click code to show an image by building up the string to pass to the src attribute:

var noOfInputs = 0;
function buttons_click () {
  noOfInputs++;

// N.B. clicking more than 3 times will cause the the code to look for a "Number4.jpg"
//You can handle this by resetting noOfInputs if it exceeds 3 as follows:

  if(noOfInputs > 3)
    noOfInputs = 0;

  var srcImageLink = "Number" + noOfInputs + ".jpg"
  window.document.getElementById('myImage').src = srcImageLink;
}

score 0 · Accepted Answer · answered Mar 19 '17 at 15:43

This code will change the counter image.

    <!DOCTYPE html>
    <html>
    <body>

        <script language="JavaScript" type="text/javascript">

            var noOfInputs = 0;
            function buttons_click() {

                noOfInputs++;

                if (noOfInputs === 0) {
                    window.document.getElementById('myImage').src = "Number0.jpg";
                }

                if (noOfInputs === 1) {
                    window.document.getElementById('myImage').src = "Number1.jpg";
                }

                if (noOfInputs === 2) {
                    window.document.getElementById('myImage').src = "Number2.jpg";
                }

                if (noOfInputs === 3) {
                    window.document.getElementById('myImage').src = "Number3.jpg";
                }

            }

        </script>

        <button onclick="buttons_click()">1</button>
        <button onclick="buttons_click()">2</button>
        <button onclick="buttons_click()">3</button>

        <img id="myImage" src="Number0.jpg" style="width: 400px">

        <button onclick="document.getElementById('myImage').src='Number0.jpg';noOfInputs=0;">Cancel</button>

    </body>
    </html>

JavaScript: Count Total # of button clicks from Multiple buttons?

3 Answers3