Как посчитать клики на изображении через событие onclick? - PullRequest
Новая
       1

Как посчитать клики на изображении через событие onclick?

1 голос
/ 22 июня 2019

У меня есть изображение с событием 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>

Я ожидаю, что на выходе будет изображение, на которое я нажал, и полоса ввода на боковой стороне, сообщающая, сколько раз я нажал, но она просто показывает изображение и строку ввода рядом с ним.

Не могли бы вы помочь мне достичь желаемого результата?

Ответы [ 2 ]

4 голосов
/ 22 июня 2019

Во-первых, вам нужно реализовать функцию с именем buttonclick, которая увеличивает значение ввода.

Во-вторых, идентификаторы должны быть уникальными. Ваше изображение и входные данные должны иметь разные идентификаторы, чтобы 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>
1 голос
/ 22 июня 2019

Используйте этот код

Ваша разметка: 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...