我有一张包含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>
我希望输出是我单击的图像和侧面的输入栏,说明我单击了多少次,但它只显示图像及其旁边的输入栏。
你能帮我达到我想要的结果吗?
首先,您需要实现一个名为 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>
使用此代码
您的标记:
<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>