单击图像并计算点击次数（Javascript）时如何使用.addEventListener

Question

//* I am trying to click on an image and it counts the clicks*//

var addUp = function(counterId) {
  var count = 0;

elem.addEventListener('click', function(counterID){
    return function () {
        var counterEle = document.getElementById(counterId);
    if (counterEle)
        counterEle.innerHTML = "Picture Clicks: " + ++count;
       }
    };
   
var elem = document.getElementById('PicC');
    PicC.addEventListener("click", addUp("PicC-counter"), false);

<img id="PicC" src="avatar.png" alt="Avatar" style="width:200px" onclick="addUp()">

Answer 1

function clickCount(element, listener) {
  if (!element) throw new Error("No element to listen to");
  let clickCountObj = {};
  clickCountObj.clickCount = 0;
  clickCountObj.clickDelay = 500;
  clickCountObj.element = element;
  clickCountObj.lastClickTime = 0;
  let clickCountListener = function (e) {
    if ((e.timeStamp - clickCountObj.clickDelay) < clickCountObj.lastClickTime) {
      clickCountObj.clickCount = clickCountObj.clickCount + 1;
    }
    else {
      clickCountObj.clickCount = 1;
    }
    clickCountObj.lastClickTime = e.timeStamp;
    listener.call(element, clickCountObj.clickCount, e);
  };
  clickCountObj.remove = function () {
    element.removeEventListener("click", clickCountListener);
  }
  element.addEventListener("click", clickCountListener);
  return clickCountObj;
}

Answer 2

You've made it much more complex than it needs to be.

 const output = document.getElementById("count"); document.getElementById('PicC').addEventListener("click",function(event){ output.textContent = +output.textContent + 1; });

 <img id="PicC" src="avatar.png" alt="Avatar" style="width:200px"> <div>Click count = <span id="count">0</span></div>

Answer 3

Here's what went wrong, as far as I can tell:

• addEventListener was inside a function
• addEventListener doesn't accept function parameters
• count was being reset every click
• and more

You can simply hook up the event listener to a function that'll increment clicks and add the value to the click counter.

 var clicks = 0; document.getElementById("clickme").addEventListener("click", addClick); function addClick() { clicks++; document.getElementById("clickCounter").innerHTML = "Picture Clicks: " + clicks; }

 #clickme { background-color: black; width: 100px; height: 100px;

 <div id="clickme"></div> <:-- replaced with div for convenience --> <div id="clickCounter">Picture Clicks: 0</div>

Answer 4

There's no need of addEventListener for such a simple task.

My suggestion (no CSS added):

 var i = 1; PicC.onclick = () => { counter.innerHTML = i; i++; }

 <img id="PicC" src="https://via.placeholder.com/150" alt="Avatar"> <br> <div>Click(s): <span id="counter">0</span></div>