How do I add a counter to show how many times a div element has been clicked?

Question

I am creating a basic website for a personal project. I have a div element in the code as well. When a user clicks this particular div element, I want the site to display a counter next to the div element to count how many times it has been clicked. I don't need to save anywhere else how many times it has been clicked. Is this possible with JS and how could I do this?

I don't know much Javascript at all, so I haven't known what exactly to try.

I want to have a basic counter next to the element to count how many times it has been counted. Again, nothing needs to be saved a server. Also, I am not worried about how many times a user can click the div element and add another number.

Answer 1

First you need a counter where you store the number of clicks

let clicks = 0;

Then you need to find your div in the DOM using

document.getElementById() // or
document.getElemenyByClass() // or similar

An example of finding your div would be

my_div = document.getElementById("click_div");

Then you need to add an Event listener to the div

Something like this

my_div.addEventListener("click", function(){
  // add code here that increases the /clicks/ variable
});

Answer 2

Welcome to stackoverflow @Gabrielle! I understand that your new to JavaScript and haven't been able to find a meaningful answer to attempt this project.

Lets start basic first, in JavaScript, we need to store the value of clicks, so we declare a variable

i = 0

Now we want to give that specific div an ID, so lets say <div id="special"> Some Content...</div>

Within our JavaScript code block, we need to reference to special, so we create another variable,

myDiv = document.getElementById("special")

myDiv now is referenced to that special div you want to track. Next we create the on click event to track clicks on that element.

myDiv.addEventListener("click",function(){ Clicked! Do something... })

addEventListener tells the DOM that it wants to listen to clicks occurring onto that element only and if so, trigger the instructions inside of the function tag.

Now we increase the counter, or the variable i each time a click occurs, so we use i += 1

This way each click that occurs, i adds one to itself.

Lastly we have to show that number to another special ID on the page, I will leave that part "Since its simple" to you to figure out but I will reference it below.

// Variables
i = 0;
myDiv = document.getElementById("special");

// Event Listeners
myDiv.addEventListener("click", function() {
  i += 1;
  console.log(i);
});

<div id="special">Click Me!</div>

Some help with displaying the number inside of your page, go to JS Inner HTML

Hope this helped! Don't forget to thumbs this up if it did!