时间戳

首页 > 解决方案 > 使用javascript更改图像onclick

javascript - 使用javascript更改图像onclick

问题描述

这是我的问题：

我是 Javascript 新手，我正在尝试在点击时更改我的图像。

这是一个简单的反击游戏，会制作 2 帧鱿鱼击中 dab 的动画。

到目前为止，我已经让计数器正常工作，但我也无法在点击时更改图像。此外，它必须变回原始图像，以便可以再次单击和计数。

  <html lang="en">
 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
 <body>
<div class="container">

        <button onclick="dabMan()"><img src="./squid-dab1.gif"> . 
        </button>
        <br><br>
        How many dabs??
        <input type="text" id="text">

</div>


<script src="./script.js"></script>


  </body>
 </html>

var dabcount = 0;

function dabMan() {
dabcount = dabcount + 1
document.getElementById('text').value = dabcount;
console.log("dabMan", dabMan)

document.getElementById("./squid-dab1.gif") .src = "./squid-dab2.gif";
console.log("changeimage", dabMan)
 }

标签： javascriptimagedomonclick

解决方案

不要在 html 中使用“onclick(){}”属性，而是在 js 中编写一个事件监听器。假设您的图像标签是这样的：

<img src='./squid-dab1.gif' id='myImage'>

注意： Javascript 需要知道如何找到您的图像...因此 ID

您的 javascript 代码应如下所示：

<script>
    var image = document.getElementById('myImage');

    image.addEventListener('click', function(){
        changeImage();
    });

    function changeImage(){
        image.src = './squid-dab2.gif';
    }
</script>

这样一来，当您单击图像时，它就会发生变化。如果您想要一个按钮来执行此操作，只需创建一个 ID 为“myImage”的按钮，如下所示：

<button id='myImage'>Click me to change the picture</button>

推荐阅读