根据用户输入使用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

您可能需要说明使用哪种模板引擎或类似的模板引擎，因为“ {{messages.get.message}}”在使用普通js时不会有多大帮助（尽管语法上格式正确）

调试提示：

调试器；

用js代码在chrome / firefox（+ firebug）/中启动调试器...

否则，您也可以使用控制台命令，例如console.debug（“ if 1”）找出正在发生的情况

还可以大致看一下控制台输出，应该没有警告或错误。

下一步：在定义变量之前，您要尝试使用可能是全局变量（由于前面缺少“ var”）。 Javascript是从头到尾，从左到右（为了便于理解，假设是那样的方式），从上到下运行。

因此，您尝试将图像的src设置为当时未定义的内容，然后再定义该变量。 javascript中没有指向非对象类型的指针（字符串常量是）

为了解决您的问题，您可能必须在代码中交换一些行，以便设置使用的变量，然后使用THEN，而不是相反。

Answer 2

那可能是一个参考循环：

$(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"){之类的条件都不为真，则由于defaultimg.src = pictureImage; ，它必须不显示任何内容defaultimg.src = pictureImage; 与未分配的pictureImage变量。