如何使用一個按鈕（HTML/JS）兩個圖像之間進行切換

我知道有一個錯誤（我試圖預覽在瀏覽器上我的代碼和按鈕無法正常工作），但我不能發現它，並希望儘可能使我的代碼更高效。如何使用一個按鈕（HTML/JS）兩個圖像之間進行切換

<!DOCTYPE html> 
<html> 
<body> 

<h1>Mood Changer</h1> 

<button onclick="ChangeImage()">Change Mood</button> 

<img id="myImage" src="Images/sad.png" style="width:100px"> 

<script> 
    var index = 0; 
    var ImageList = newArray(1); 
    ImageList[0] = "Images/sad.png"; 
    ImageList[1] = "Images/smiley.png"; 
    
    function ChangeImage() 
    { 
    index = index + 1; 
     If (index ==ImageList.length) 
     { 
     index = 0; 
     } 
     var image1 = document.getElementById("myImage"); 
     image1.src = ImageList[index]; 
    } 
</script> 

</body> 
</html>

來源

2017-02-09 R.Cache

newArray(1); is not a function.

試試這個。

var ImageList = [];

這將創建一個空數組爲你的圖片列表推入。

也，關鍵字「如果」必須全部小寫。將「如果」更改爲「如果」。

來源

2017-02-09 21:56:21 Korgrue

你的代碼幾乎是罰款，你有我已經重構只是幾個錯誤。

var index = 0; 
 
var imageList = ['http://wallpaper-gallery.net/images/image/image-13.jpg', 'https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png']; 
 

 
function changeImage() { 
 
    index = index + 1; 
 
    if (index == imageList.length) { 
 
    index = 0; 
 
    } 
 
    var image1 = document.getElementById("myImage"); 
 
    image1.src = imageList[index]; 
 
}

<h1>Mood Changer</h1> 
 

 

 
<button onclick="changeImage()">Change Mood</button> 
 

 
<img id="myImage" src="http://wallpaper-gallery.net/images/image/image-13.jpg" style="width:100px">

來源

2017-02-09 21:56:31

幾個意見：

你數組的語法是有點過了，可以考慮這樣的事情：

var ImageList = []; 
ImageList.push("Images/sad.png") 
ImageList.push("Images/smiley.png")

在JavaScript中，有條件的關鍵字較低情況下（如果不是如果）

考慮指數+ = 1而不是指數=指數+ 1

看看這個計算器問題的討論上Difference between == and === in JavaScript

來源

2017-02-09 22:18:38 smeckydev

see this example below 

<html> 
<head> 
<script type="text/javascript"> 
function changeImage(element) { 
document.getElementById('imageReplace').src = element; 
} 
</script> 
</head> 
<body> 
<img src="" alt="Images" id="imageReplace"/><br /> 
<a href="#" onclick="changeImage('developervarun.png');">Link1</a> 
<a href="#" onclick="changeImage('himalayas.jpg');">Link2</a> 
</body> 
</html>

來源

2017-02-09 22:30:01 varunkumar

如何使用一個按鈕（HTML/JS）兩個圖像之間進行切換

回答

相關問題