[英]How to switch between two different colors with one button using javascript
[英]How to switch between two images using one button (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>
您的代码几乎没问题,我重构了一些错误。
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">
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>
newArray(1); is not a function.
试试这个。
var ImageList = [];
这将为您创建一个空数组,以将图像列表推送到其中。
此外,关键字“if”需要全部小写。 将“如果”改为“如果”。
一些观察:
你的数组语法有点偏离,考虑这样的事情:
var ImageList = [];
ImageList.push("Images/sad.png")
ImageList.push("Images/smiley.png")
在 javascript 中,条件关键字是小写的(if 而不是 If)
考虑 index += 1 而不是 index = index + 1
查看这个 stackoverflow 问题,讨论JavaScript 中 == 和 === 之间的区别
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.