Question

我有一个带有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>

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

能否请您帮我达到预期的效果？

Answer 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>

Answer 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>

如何通过onclick事件计算图片的点击次数？

2 个答案: