Javascript count on button click

Number of times button is clicked

If you return out of the function it merely means it stops executing. Next time you click the button it will get executed again, however. What exactly is the goal here — stop counting or stop executing the function? Or is this an XY problem by any chance?

8 Answers 8

Move the conditional above the alert. Every time the button is clicked, you’re calling the function, which alerts the count before it checks the whether it should return.

Try it  

Just move the if block to the beginning of the function.

function myFunction() < if(count == 3)< //exit the function but it's not doing that and keeps on counting. return; >count = count + 1; alert(count); > 

Your function keep counting because you keep calling it. You could do something like this:

On each click you are ‘exiting’ the function, that is, it is always executed and the return is after the alert so it is always shown. You can move that up or you can simply remove the onclick attribute and the function won’t even be called, assuming your button’s id is btn_3_click :

document.getElementById('btn_3_click').onclick = null; 

will remove the onclick listener

this is what you are currently doing. When you click on the button, you are calling the function, myFunction() which is correct. however, every time you click the button, you are effectively just calling the function over and over again, which means that even after you get to the value 3, when you press it again, it is going to repeat the function, and then progress to the value 4. 5. 6.. etc. It is exiting the function, except since you are calling the function again, for the 4th time, it is still going to increment again and again.

Look up how to make a «disable clickable button». I just did this which works. As you can see, I have given the button an id of myBtn, and then when the value is equal to 3, I disable the button. (Note, the === to indicate that I am also checking that the increment is also an integer type)

Try it  

The problem exists with your structure. Technically, you exit the function every time you click the button. I added a disable line and changed the logic a little to help you out.

Try it  

You will see that upon the third click, your button disables itself.

Источник

Button click counter in JavaScript

Here i have found a JavaScript button click counter that counts the no. of clicks on a button and saves the number in something called web storage, I don’t know what that really is. One thing I know for sure that this script only works for one computer, meaning if I click the button 10 times then if any other visitor clicks the button it will not show that number of clicks to him which i have clicked before. Now what i need is that, somehow either with javascript or php, the number of clicks should be saved on a text file in my server, and later whenever any other visitor visits the HTML page he also should get the same number which is present in the text file. Here the HTML Page with the code.

      
Click me!
 
Click the button to see the counter increase.
 
Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).
   

In a simple way, There is a button on an HTML page. If visitor A clicks it for 5 times and close the page. And later, visitor B visits the page he should get the number 5 first, and then when he clicks, it should get counted and saved automatically.

@Samon Souza You’ll need to create an ajax call to send the data to the server . The server then needs to evaluate the response, and open the file, write into the file, then close the file. Now, everytime the page is requested you’ll need to include the text in that file, and use the text as a counter.

Yes, please could you show me how to do that, please cause i am a beginner. i’ll be really great full if you do the same

Just a note on locaStorage: it’s a sanboxed environment with about 2-10MB per domain (by default) to save data to (in JSON format). localStorage is ofc. only accessible to one user. It can also be cleared in the browser storage settings, though.

Источник

Number of times button is clicked

If you return out of the function it merely means it stops executing. Next time you click the button it will get executed again, however. What exactly is the goal here — stop counting or stop executing the function? Or is this an XY problem by any chance?

8 Answers 8

Move the conditional above the alert. Every time the button is clicked, you’re calling the function, which alerts the count before it checks the whether it should return.

Try it  

Just move the if block to the beginning of the function.

function myFunction() < if(count == 3)< //exit the function but it's not doing that and keeps on counting. return; >count = count + 1; alert(count); > 

Your function keep counting because you keep calling it. You could do something like this:

On each click you are ‘exiting’ the function, that is, it is always executed and the return is after the alert so it is always shown. You can move that up or you can simply remove the onclick attribute and the function won’t even be called, assuming your button’s id is btn_3_click :

document.getElementById('btn_3_click').onclick = null; 

will remove the onclick listener

this is what you are currently doing. When you click on the button, you are calling the function, myFunction() which is correct. however, every time you click the button, you are effectively just calling the function over and over again, which means that even after you get to the value 3, when you press it again, it is going to repeat the function, and then progress to the value 4. 5. 6.. etc. It is exiting the function, except since you are calling the function again, for the 4th time, it is still going to increment again and again.

Look up how to make a «disable clickable button». I just did this which works. As you can see, I have given the button an id of myBtn, and then when the value is equal to 3, I disable the button. (Note, the === to indicate that I am also checking that the increment is also an integer type)

Try it  

The problem exists with your structure. Technically, you exit the function every time you click the button. I added a disable line and changed the logic a little to help you out.

Try it  

You will see that upon the third click, your button disables itself.

Источник

How to count the number of times a button is clicked using JavaScript?

Tracking button clicks is a common task in JavaScript and can be achieved by using the addEventListener() method. By adding an event handler method to the button element and incrementing a variable each time the button is pressed, we can simply keep track of button clicks. We can quickly show the user how many clicks there have been by showing that information on a web page and keeping the clicks in localStorage. We can even save the clicks even after the user shuts the browser.

Suppose we are building a simple calculator then we will need buttons that can do functions like addition, subtraction, multiplication, division, equal to, and so on. Hence, including a button on a web page is one approach to making it more interactive. In this blog, we will mainly see how to design a button and we will make it clickable and count the times it is clicked by the user.

Creating a Basic Button

We must first add a button element on our web page before we can begin tracking button clicks. The HTML element is the simplest way to make a button on a web page.

Example

This creates a button with the text «Click Me» and an id of «myButton». We will use this id later to reference the button in our JavaScript code.

Tracking Button Clicks Using JavaScript

Method 1: addEventListener()

There are various JavaScript methods for monitoring button clicks, but the most common ways used today is to use the addEventListener() method. the addEventListener() function is an inbuilt javascript function which adds an event handler function to an element, this event handler runs when that certain event occurs such as, onclicking a button, hovering any element, element in, or element out. In our situation, we want to associate an event handler function with the button element, which will be executed when the button is clicked.

Example

Here is an example of how to use the addEventListener() method to track button clicks −

   Click Me    

First, select the Button element with the ID «myButton» using the getElementById() method. Then we will initialize the variable clickCount and set its value to zero. This clickCount variable is used to store and display the number of times the button is clicked.

The button element then receives the event handler code via the addEventListener() function. The first input to the addEventListener() method specifies the type of event to listen for (click in this example). The second parameter indicates the function to be performed when the button is pressed.

Increment the ClickCount variable in the event handler method and record the current value of ClickCount to the screen. This allows you to determine the frequency of button click.

Method 2: onclick()

This method attaches an event handler to the button element using the onclick property. The event handler function increments a counter variable each time the button is clicked.

Example

Here is the example code for onclick property

   Click Me var count = 0; var button = document.getElementById("myButton"); var result = document.getElementById("result"); button.onclick = function()  

Method 3: Using Bind Method

This method attaches an event listener to the button element using the bind method and also binds the current count value to the function.

Example

   Click Me    

Method 4: Using a Closure

A closure is a function that can access variables in the parent function’s scope even after the parent function has returned. You can maintain track of the count variable in a way that is not available from the global scope by using a closure.

Example

   Click Me    

Method 5: Storing the Click Count in Local Storage

While showing the click count on a web page is useful, it is not a long-term solution. The click count is lost whenever the user refreshes the page or shuts the browser. We can utilise the localStorage object to save the click count in the user’s browser to save the click count even after the user shuts the browser.

Example

Here is an example of how to use localStorage to save the click count −

   Click Me 
Button clicked: 0 times
    

First, we check if there is a value stored in localStorage under «clickCount». If there is a value stored on localStorage, then we parse it to an integer, and then assign it to the clickCount variable.

Next, add another line in the event listener function to save the current value of the clickCount variable to localStorage using the setItem() method. This way, even if the user refreshes the page or closes the browser, the clicks will be saved and retrieved the next time she visits her website.

It’s important to note that the localStorage object has a storage limit of around 5-10MB depending on the browser. Also, the localStorage object stores the data as strings, so you need to convert the numbers to string and parse back to number when getting the values.

Источник