There is a code which is the name of the block and counts clicks on the button. The problem is that the field with the number of clicks changes once. From 0 to 1 and all. Tell me what's the problem

(function () { var buttons = document.querySelector('#list'); buttons.onclick = function (e) { var clicks = 0; clicks++; var target = e.target; if (target.tagName = 'BUTTON') { var counter = target.closest('li').querySelector('.product-item__counter'); counter.innerHTML = clicks; var product = target.closest('li').querySelector('.product-item__title').innerHTML; alert(' You have bought a ' + product); } }; })();

Example https://jsfiddle.net/dedn/60b6uL4c/

  • Thank you for your responses. All very detailed, and all helped me. - pridan

3 answers 3

var clicks = 0; Here you reset the current value of the counter and start over.

Well, each counter must have its own storage of the current value.

if (target.tagName = 'BUTTON') { - Here you do not check anything, the assignment operator returns a truthy value.

You can select all elements ( querySelectorAll ) and hang a separate handler for each.
As the storage of the current value of the counter, you can use the display value itself:

 document.querySelectorAll('ul .btn') .forEach(function(el){ el.onclick = function() { let cnt = this.closest('li').querySelector('.cnt'); cnt.innerText = parseInt(cnt.innerText, 10)+1; }; }); 
 <ul> <li> <button class="btn">Button</button> <span class="cnt">0</span> </li> <li> <button class="btn">Button</button> <span class="cnt">0</span> </li> <li> <button class="btn">Button</button> <span class="cnt">0</span> </li> </ul>

Or with a handler common to all (by analogy with yours):

 document.querySelector('ul').onclick = function(e) { let target = e.target; if (target.tagName != 'BUTTON') return; let cnt = target.closest('li').querySelector('.cnt'); cnt.innerText = parseInt(cnt.innerText, 10)+1; }; 
 <ul> <li> <button class="btn">Button</button> <span class="cnt">0</span> </li> <li> <button class="btn">Button</button> <span class="cnt">0</span> </li> <li> <button class="btn">Button</button> <span class="cnt">0</span> </li> </ul>

  • one
    Thanks for the answer. I just wanted to do with the general handler as you indicated in the example. Tell me why in this line cnt.innerText = parseInt (cnt.innerText, 10) +1; number 10? - pridan
 buttons.onclick = function (e) { var clicks = 0; clicks++;

The fact is that you do not save the state. Each time you press a button, your counter is reset to zero and it increases by +1. The simple way to check this is to set it to var clicks = 0;debugger; and you will see that after clicking a button, your clicks always 0.

The solution is simple - you need to render the ad clicks out of the click function. However, you will then have one counter for all buttons. You can save the value of clicks for each button separately in the html itself for example (not the best option).

UPD

Looked closer and found something.

1) We look here about the querySelector, namely on the detail that it will return only the first element.

2) Secondly, why did your buttons suddenly have <ul class="list" id="list"> ?? This is absolutely wrong. pressing anywhere we get a function call (not just a button). Your variable is misleading. If you want to handle the buttons, then hang the class on them and look for using the class selector .someClass tyk .

3) Here I threw a shark along (do not beat plz with slippers). Using the closure, we get our counter on each button.

 function makeCounter() { var currentCount = 1; return function() { return currentCount++; }; }; var buttons = document.getElementsByClassName('ss1'); var clicker = function(e) { var value = this.counter(); console.log(this.defaultValue + " - " + value); }; for (var i = 0; i < buttons.length; i++) { buttons[i].counter = makeCounter(); buttons[i].onclick = function(e) { clicker.apply(this); }; } 
 <div> <input type="button" id="1" class="ss1" text="s" value="haha"> </div> <div> <input type="button" id="2" class="ss1" value="haha1"> </div>

    You can use localStorage like this:

     (function() { var clicks = 0; var buttons = document.querySelector('#list'); buttons.onclick = function(e) { clicks = clicks ? localStorage.getItem(e.target.id) : 0; clicks++; localStorage.setItem(e.target.id, clicks); var target = e.target; if (target.tagName = 'BUTTON') { var counter = target.closest('li').querySelector('.list-item__counter'); counter.innerHTML = clicks; var product = target.closest('li').querySelector('.list-item__title').innerHTML; alert(' You have bought a ' + product); } }; })(); 
     <div class="container"> <h1 class="title">List</h1> <ul class="list" id="list"> <li class="list-item"> <h2 class="list-item__title">Title First</h2> <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dolorum exercitationem harum ipsam modi nesciunt optio qui quia quidem reiciendis? Alias consectetur dolorem hic nobis optio quam quos sapiente veniam.</p> <button id="bt1" class="list-item__click-btn">btn</button> <span class="list-item__counter">0</span> </li> <li class="list-item"> <h2 class="list-item__title">Title Second</h2> <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dolorum exercitationem harum ipsam modi nesciunt optio qui quia quidem reiciendis? Alias consectetur dolorem hic nobis optio quam quos sapiente veniam.</p> <button id="bt2" class="list-item__click-btn">Btn</button> <span class="list-item__counter">0</span> </li> <li class="list-item"> <h2 class="list-item__title">Title Third</h2> <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dolorum exercitationem harum ipsam modi nesciunt optio qui quia quidem reiciendis? Alias consectetur dolorem hic nobis optio quam quos sapiente veniam.</p> <button id="bt3" class="list-item__click-btn">btn</button> <span class="list-item__counter">0</span> </li> <li class="list-item"> <h2 class="list-item__title">Title Fourth</h2> <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dolorum exercitationem harum ipsam modi nesciunt optio qui quia quidem reiciendis? Alias consectetur dolorem hic nobis optio quam quos sapiente veniam.</p> <button id="bt4" class="list-item__click-btn">Btn</button> <span class="list-item__counter">0</span> </li> </ul> </div>