根据用户输入用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"){ 是真实的，它必须显示没有因defaultimg.src = pictureImage;与未分配pictureImage变量。

Answer 2

您可能想要说明使用哪种模板引擎或类似的工作方式，因为“{{messages.get.message}}”在vanilla js中帮不了您的忙（尽管它在语法上会形成良好）

调试提示：

调试器;

在js代码

启动的铬/火狐（+萤火虫）调试器/ ...

否则，你也可以使用控制台命令，例如 console.debug（“if 1”） 找出发生了什么

也有一般的控制台输出，应该没有警告或错误。

Next： 您正在尝试在定义它之前使用可能的全局变量（因为前面缺少“var”）变量“pictureImage”。从头到尾，从左到右运行Javascript（让我们假设这是为了更容易理解），从上到下。

因此，您尝试将图像的src设置为该点未定义的内容，然后再定义该变量。还有是在javascript指向非对象类型没有这样的事情（这串常量是）

要解决你的问题，你可能会需要交换一些线在你的代码，所以使用的变量被设置，然后使用THEN，而不是相反。