JavaScript圖片onclick無法正常工作
[英]javascript image onclick won't work
問題描述
我想單擊一個圖像，然后將其更改為另一個圖像，但它不起作用，我使用了w3schools.com上的代碼，但它也不起作用
這是代碼：
<!DOCTYPE html>
<html>
<body>
<img id="myImage" onclick="changeImage()" src="img/checkoff.png">
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("checkon")) {
image.src = "checkoff.png";
} else {
image.src = "checkon.png";
}
}
</script>
</body>
</html>
3 個解決方案
解決方案1
0 已采納 2017-10-09 11:10:00
您的代碼中有問題
在這里，您只使用帶有擴展名的圖像文件的名稱，還需要給出圖像的相對文件路徑：
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("checkon")) {
image.src = "img/checkoff.png";
} else {
image.src = "img/checkon.png";
}
}
在這里您可以檢查此示例。
運行正常。
希望這對您有幫助
function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("generic-image-placeholder")) { image.src = "https://cdn.noths-static.com/system/product_images/images/001/037/649/original_set-of-eight-white-heart-name-place-holders.jpg"; } else { image.src = "https://www.webpagefx.com/blog/images/cdn.designinstruct.com/files/582-how-to-image-placeholders/generic-image-placeholder.png"; } }
<!DOCTYPE html> <html> <body> <img id="myImage" onclick="changeImage()" src="https://cdn.noths-static.com/system/product_images/images/001/037/649/original_set-of-eight-white-heart-name-place-holders.jpg"> </body> </html>
解決方案2
0 2017-10-09 11:11:37
嘗試下面的代碼正在工作
<img id="myImage" onclick="changeImage()" src="http://fakeimg.pl/300/">
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("http://fakeimg.pl/250x100/")) {
image.src = "http://fakeimg.pl/300/";
} else {
image.src = "http://fakeimg.pl/250x100/";
}
}
</script>
您的代碼請點擊圖片時更改路徑
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("checkon.png")) {
image.src = "img/checkoff.png";
} else {
image.src = "img/checkon.png";
}
}
</script>
解決方案3
-2 2017-10-09 11:22:34
圖片路徑在您的代碼中不正確。 請更新如下：
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("checkon")) {
image.src = "img/checkoff.png";
} else {
image.src = "img/checkon.png";
}
}
</script>
Javascript Onclick，將無法使用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.