javascript - 根据用户输入使用 Javascript 显示图像

Question

我一直在尝试使用以下代码显示图像。旨在对用户输入进行比较以显示正确的图片。

$(document).ready(function(){ 
var defaultimg = document.getElementById('image1');
defaultimg.src = pictureImage;
var pictureImage = "images/unknown.png";
if({{messages.get.message}} == "Mewtwo"){   
var imgobject = document.getElementById('image1');
imgobject.src = pictureImage;
pictureImage = "images/150.png";
}
if({{messages.get.message}} == "Charmeleon"){   
var imgobject2 = document.getElementById('image1');
imgobject2.src = pictureImage;
pictureImage = "images/005.png";
}

if({{messages.get.message}} == "Warturtle"){    
var imgobject3 = document.getElementById('image1');
imgobject3.src = pictureImage;
pictureImage = "images/008.png";
}


)}

到下面的 html 片段

<img id="image1" alt="Pokemon" width="88" height="75">&ensp;

目前它只显示一个空框。

有人可以就是否可以修复此方法来显示图像提供建议吗？感谢您的时间和帮助。

Answer 1

这可能是一个引用循环:

$(document).ready(function(){ 
     var defaultimg = document.getElementById('image1'); 
     // defaultimg now contains image1
     // using jQuery and getElementbyId together is weired

     defaultimg.src = pictureImage;  
     // pictureImage is not assigned, so the url is empty
     // prob. cause for empty block?

     var pictureImage = "images/unknown.png"; 
     // ok, now we assign an url 

     if({{messages.get.message}} == "Mewtwo"){   
     // is that path correct?

       var imgobject = document.getElementById('image1'); 
       // copy of the empty image from above

       imgobject.src = pictureImage;       
       // we assign an url

       pictureImage = "images/150.png";    
       // new url on pictureImage, unused so far.
     }
  ...

如果没有类似 if({{messages.get.message}} == "Mewtwo"){ 的条件是 true，由于 defaultimg.src = pictureImage; 未分配 pictureImage 变量，它必须不显示任何内容。