如何使用一个按钮（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）两个图像之间进行切换

回答

相关问题