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 = ['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">

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）

考虑索引+ = 1而不是index = index + 1

查看此stackoverflow问题以获取有关Difference between == and === in JavaScript

的讨论

如何使用一个按钮在两个图像之间切换（html / js）

4 个答案: