如何使用一個按鈕在兩個圖像之間切換（html/js）

Question

我知道有一個錯誤（我試圖在瀏覽器上預覽我的代碼，但按鈕無法工作）但我無法發現它，並希望盡可能提高我的代碼的效率。

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

Answer 1

您的代碼幾乎沒問題，我重構了一些錯誤。

 var index = 0; var imageList = ['https://images.squarespace-cdn.com/content/v1/5b635679ee17591ac752ba2b/1542322345489-AKVORNCEJXZXFLIRIVAX/ke17ZwdGBToddI8pDm48kA9rhCjhJUYcQpKsBaLXN1ZZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIye_uGeP4isZUnhF2J4BSLX0iSmbQA7pLf20f1CNe8SkKMshLAGzx4R3EDFOm1kBS/shutterstock_489006448.jpg?format=2500w', '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">

Answer 2

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>

Answer 3

newArray(1); is not a function.

試試這個。

var ImageList = [];

這將為您創建一個空數組，以將圖像列表推送到其中。

此外，關鍵字“if”需要全部小寫。 將“如果”改為“如果”。

Answer 4

一些觀察：

你的數組語法有點偏離，考慮這樣的事情：

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

在 javascript 中，條件關鍵字是小寫的（if 而不是 If）

考慮 index += 1 而不是 index = index + 1

查看這個 stackoverflow 問題，討論JavaScript 中 == 和 === 之間的區別

如何使用一個按鈕在兩個圖像之間切換（html/js）

問題描述

4 個解決方案

解決方案1
2 2017-02-09 21:56:31

解決方案2
1 2017-02-09 22:30:01

解決方案3
0 2017-02-09 21:56:21

解決方案4
0 2017-02-09 22:18:38

如何使用一個按鈕在兩個圖像之間切換（html/js）

問題描述

4 個解決方案

解決方案1 2 2017-02-09 21:56:31

解決方案2 1 2017-02-09 22:30:01

解決方案3 0 2017-02-09 21:56:21

解決方案4 0 2017-02-09 22:18:38

解決方案1
2 2017-02-09 21:56:31

解決方案2
1 2017-02-09 22:30:01

解決方案3
0 2017-02-09 21:56:21

解決方案4
0 2017-02-09 22:18:38