admin管理员组

文章数量:1023815

I have an image with onclick event and want to count all clicks on the image and show the total number in an input bar.

Here's a piece of code I used that didn't work 

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

I expect the output to be an image that I clicked and an input bar on the side saying how many times I clicked but it just shows the image and the input bar next to it.

Could you please help me to achieve my desired result?

I have an image with onclick event and want to count all clicks on the image and show the total number in an input bar.

Here's a piece of code I used that didn't work 

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

I expect the output to be an image that I clicked and an input bar on the side saying how many times I clicked but it just shows the image and the input bar next to it.

Could you please help me to achieve my desired result?

  • javascript
  • html
  • image
  • onclick
Share Improve this question edited Jun 21, 2019 at 21:43 Kate Orlova 3,2835 gold badges14 silver badges36 bronze badges asked Jun 21, 2019 at 21:06 InexperiencedCoderInexperiencedCoder 471 gold badge2 silver badges9 bronze badges 5
  • 3 Do you have a buttonclick function defined in the javascript? – nurdyguy Commented Jun 21, 2019 at 21:09
  • On image click you will call the function buttonclick() but this function is not present in your script. So it's normal that nothing append – johannchopin Commented Jun 21, 2019 at 21:10
  • I am new to stack overflow, This is not all of the code I also have this in the script section <script type="text/javascript"> function buttonClick() { document.getElementById('gimper').onclick = buttonClick(); } </script> – InexperiencedCoder Commented Jun 21, 2019 at 21:11
  • 1 Why are you binding an onclick listener when you click on the button? You should be incrementing, not adding another event listener – epascarello Commented Jun 21, 2019 at 21:16
  • Your function defined name is "buttonClick" and used name is "buttonclick". Take care about letter cases. – Rancbar Commented Jun 21, 2019 at 21:21
Add a ment  | 

2 Answers 2

Reset to default 6

First, you need to implement a function called buttonclick that increments the value of the input.

Second, IDs are meant to be unique. Your image and input should have different IDs for document.getElementbyId to work.

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>

Use this code

your markup:

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

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

I have an image with onclick event and want to count all clicks on the image and show the total number in an input bar.

Here's a piece of code I used that didn't work 

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

I expect the output to be an image that I clicked and an input bar on the side saying how many times I clicked but it just shows the image and the input bar next to it.

Could you please help me to achieve my desired result?

I have an image with onclick event and want to count all clicks on the image and show the total number in an input bar.

Here's a piece of code I used that didn't work 

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

I expect the output to be an image that I clicked and an input bar on the side saying how many times I clicked but it just shows the image and the input bar next to it.

Could you please help me to achieve my desired result?

  • javascript
  • html
  • image
  • onclick
Share Improve this question edited Jun 21, 2019 at 21:43 Kate Orlova 3,2835 gold badges14 silver badges36 bronze badges asked Jun 21, 2019 at 21:06 InexperiencedCoderInexperiencedCoder 471 gold badge2 silver badges9 bronze badges 5
  • 3 Do you have a buttonclick function defined in the javascript? – nurdyguy Commented Jun 21, 2019 at 21:09
  • On image click you will call the function buttonclick() but this function is not present in your script. So it's normal that nothing append – johannchopin Commented Jun 21, 2019 at 21:10
  • I am new to stack overflow, This is not all of the code I also have this in the script section <script type="text/javascript"> function buttonClick() { document.getElementById('gimper').onclick = buttonClick(); } </script> – InexperiencedCoder Commented Jun 21, 2019 at 21:11
  • 1 Why are you binding an onclick listener when you click on the button? You should be incrementing, not adding another event listener – epascarello Commented Jun 21, 2019 at 21:16
  • Your function defined name is "buttonClick" and used name is "buttonclick". Take care about letter cases. – Rancbar Commented Jun 21, 2019 at 21:21
Add a ment  | 

2 Answers 2

Reset to default 6

First, you need to implement a function called buttonclick that increments the value of the input.

Second, IDs are meant to be unique. Your image and input should have different IDs for document.getElementbyId to work.

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>

Use this code

your markup:

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

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

本文标签： javascriptHow to count clicks on an image via onclick eventStack Overflow

版权声明：本文标题：javascript - How to count clicks on an image via onclick event? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745596068a2158177.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。