使用javascript更改圖像onclick
[英]Change image onclick using javascript
問題描述
這是我的問題：
我是 Javascript 的新手，我正在嘗試在單擊時更改我的圖像。
這是一個簡單的計數器游戲，可以制作魷魚擊打輕拍的 2 幀動畫。
到目前為止，我已經讓計數器工作了，但我也無法在點擊時更改圖像。 此外，它必須改回原始圖像，以便可以再次單擊和計數。
<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)
}
1 個解決方案
解決方案1
0 已采納 2018-10-23 01:27:55
不要在 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-使用“ if”更改onclick圖片
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.