Question

这是我到目前为止的代码，它所能做的只是显示第一张图片，但是按下按钮后图像不会改变，我不知道该怎么做？

＆＃13;

var escapeHtml = function(theString) {
            return theString.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
        };

＆＃13;

var index = 0;
var ImageList = ["Images\sad.png", "Images\happy.png"];

function changeImage() {
  index = index + 1;
  if (index == ImageList.length) {
    index = 0;
    'at this point it is supposed to change the image'
  }
  var image1 = document.getElementById("myImage");
  image1.src = ImageList[index];
}

＆＃13;

Answer 1

您应该设置一个包含对元素的引用的全局变量，而不是为每个函数调用设置它。

另一件事 - 您的index最初设置为0，默认img是数组中第二个位置的图片，索引为1，所以第一个函数调用没有发生任何事情，因为src没有被更改。

＆＃13;

var index = 0;
var ImageList = ["http://placehold.it/350x150", "http://placehold.it/150x150"];
var image1 = document.getElementById("myImage");

function changeImage() { 
  image1.src = ImageList[index];
  if (index < ImageList.length-1) {
    index = index + 1;
  } else {
    index = 0;
  }
    
}

＆＃13;

<img id="myImage" src="http://placehold.it/150x150" style="width:200px">
<button onclick="changeImage()">Change emotions</button>

＆＃13;

Answer 2

不确定您是否一直在代码中使用此内容，或者您是否为此帖添加了此内容，但写了一条语法无效的注释：

'at this point it is supposed to change the image'

评论应该是这样的：

// at this point it is supposed to change the image

图像路径中的斜线应该是向前的，而不是反斜杠。

请参阅内容以及其他更正和解释的代码：

＆＃13;

var index = 0;
// Paths should always use forward-slashes, not back-slashes
var ImageList = ["http://images.clipartpanda.com/apple-clipart-apple5.png",
                 "http://web.utk.edu/~gduscher/images/orange.jpg"]; 

// Get your reference to the image element outside of the function 
// so you don't have to keep getting it every time the button is clicked.
var image1 = document.getElementById("myImage");

function changeImage() { 

  // Increment the index counter by 1
  index = index + 1;  // could just write: index++
  
  // If the index has gone too high, reset it to zero
  if(index == ImageList.length){
    index=0; // You wrote your comment wrong: 'at this point it is supposed to change the image' 
  }
  
  // Set the source of the image
  image1.src= ImageList[index];
}

＆＃13;

img { width: 50px; }

＆＃13;

<button onclick = "changeImage()">Change emotions</button> 
<img id="myImage" src="http://images.clipartpanda.com/apple-clipart-apple5.png" style="width:200px">

＆＃13;

Answer 3

而不是在0和1之间切换的if语句（假设你只有两个图像），你可以使用三元运算符：

(index === 0) ? (index = 1) : (index = 0);

Answer 4

问题在于反斜杠。你用它们做什么的？在javascript中，字符串中的反斜杠用于特殊字符，因此当您更改img.src = list [index]时，它将从Images \ happy更改为Imageshappy

您的代码正常运行我假设您的图像位于名为“图像”的文件夹中。

var index=0;
var ImageList = ["Images/happy.png", "Images/sad.png"]; 
function changeImage(){ 
  index=index+1;
  if(index==ImageList.length){
   index=0;  
  }
  var image1= document.getElementById("myImage");
  console.log(image1);
  image1.src= ImageList[index];
  console.log(image1);
}

<button onclick = "changeImage()">Change emotions</button> 
<img id="myImage" src="Images/happy.png" style="width:200px">

我的代码中有哪些错误，因为它无法用一个按钮更改图像？

4 个答案: