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?
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
buttonclickfunction 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
2 Answers
Reset to default 6First, 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>