如何通过 onclick 事件计算对图像的点击次数？答案

【问题标题】：How to count clicks on an image via onclick event?如何通过 onclick 事件计算对图像的点击次数？
【发布时间】：2019-11-04 17:17:00
【问题描述】：

我有一张带有onclick 事件的图片，我想统计图片上的所有点击次数并在输入栏中显示总数。

这是我使用的一段代码，但不起作用

<html>
<head>
<title>Krummpleanimator</title>
<script type="text/javascript">
//imageselection
    function buttonClick() {
      document.getElementById('gimper').stepUp(5);
    }

</script>
</head>
<body>
    <div style="position: absolute; left: 10px; top: 40px;">
  <img id="gimper" src="paintbrush.png" width="200" height="200" alt="gimpybutt" border="5" onclick="buttonclick();">
    <input type="text" id="gimper" value="0"></input>
  </div>
</body>
</html>

我希望输出是我单击的图像和侧面的输入栏，说明我单击了多少次，但它只显示图像和旁边的输入栏。

您能帮我实现我想要的结果吗？

【问题讨论】：

你在javascript中定义了buttonclick函数吗？
点击图片时，您将调用函数buttonclick()，但您的脚本中不存在此函数。所以没有附加内容是正常的
我是堆栈溢出的新手，这不是我在脚本部分中也有这个的全部代码
点击按钮时为什么要绑定onclick监听器？您应该递增，而不是添加另一个事件侦听器
您的函数定义名称是“buttonClick”，使用的名称是“buttonclick”。小心字母大小写。

标签： javascript html image onclick

【解决方案1】：

首先，您需要实现一个名为buttonclick 的函数，该函数递增输入值。

其次，ID 是唯一的。您的图像和输入应具有不同的 ID，document.getElementbyId 才能正常工作。

function buttonclick() {
  document.getElementById("gimper").value++;
}

<body>
    <div style="position: absolute; left: 10px; top: 40px;">
  <img id="gimper_img" src="paintbrush.png" width="200" height="200" alt="gimpybutt" border="5" onclick="buttonclick();">
    <input type="text" id="gimper" value="0"></input>
  </div>
</body>

【讨论】：

【解决方案2】：

使用此代码

您的标记：

<div style="position: absolute; left: 10px; top: 40px;">
    <img id="img" src="paintbrush.png" width="200" height="200" alt="gimpybutt">
    <input type="text" id="gimper" value="0"></input>
</div>

JS 脚本：

<script>
  let image = document.querySelector('#img');
  image.addEventListener("click", function () {
    let inputValue = parseInt(document.querySelector('#gimper').value, 10);
    inputValue = isNaN(inputValue) ? 0 : inputValue;
    inputValue++;
    document.querySelector('#gimper').value = inputValue;
  })
</script>

【讨论】：