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}}”在vanilla js中对您没什么帮助（尽管它在语法上形成良好）

提示进行调试：

调试器;

在js代码中启动chrome / firefox（+ firebug）/ ...

中的调试器

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

一般来看一下控制台输出，应该没有警告或错误。

下一步：在定义它之前，你试图使用可能的全局（因为前面缺少“var”）变量“pictureImage”。 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;未分配的pictureImage变量。

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

2 个答案: