JavaScript圖片的onclick將無法正常工作

我想點擊一個圖像上，它變成另一種，但它不會工作，我使用的代碼從w3schools.com但它不會工作，要麼JavaScript圖片的onclick將無法正常工作

這是驗證碼：

<!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>

來源

2017-10-09 Daan

您是否收到過錯誤？ –

在if/else語句中，您必須將文件夾添加到圖像名稱。 'image.src ='img/checkoff.png''和'image.src ='img.checkon.png'' –

需要很多修改才能使其正常工作 – iamsankalp89

有代碼中的問題

在這裏你只用名的圖像文件的擴展名爲您還需要給圖像的相對文件路徑：這樣

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>

來源

2017-10-09 11:10:00

試試下面代碼工作

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

Click Here to see jsFiddle Demo

您的代碼，請更改路徑時，點擊圖片

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

來源

2017-10-09 11:11:37

-2

圖像路徑在您的代碼中不正確。請更新如下：

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

來源

2017-10-09 11:22:34

JavaScript圖片的onclick將無法正常工作

回答

相關問題