Question

这是我的问题：

我是Java语言的新手，我想在点击时更改图片。

这是一个简单的计数器游戏，它执行了2帧乌贼击打DA的动画。

到目前为止，我有计数器可以工作，但单击时图像也无法更改。此外，还必须将其更改回原始图像，以便可以对其进行单击并再次计数。

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

Answer 1

而不是在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>

使用JavaScript更改图片onclick

1 个答案: