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

Displaying images with Javascript based on user input

本文关键字：Javascript 显示 显示图 图像 用户 输入      更新时间：2023-09-26

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

$(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;

目前，它只显示一个空框。

有人能就这种方法是否可以固定显示图像提供建议吗？谢谢你的时间和帮助。

这可能是一个引用循环：

$(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，则由于具有未分配pictureImage变量的defaultimg.src = pictureImage;，它必须不显示任何内容。

您可能需要说明您使用的是哪种模板引擎或类似引擎，因为"｛｛messages.get.message｝"在vanilla-js中对您没有多大帮助(尽管它在语法上格式良好(

调试提示：

调试器；

在js代码中，在chrome/ffirefox(+firebug(/。。。

否则，您也可以使用控制台命令，例如。console.debug("if 1"(了解发生了什么

还要查看控制台的输出，一般情况下，应该没有警告或错误。

下一页：在定义变量"pictureImage"之前，您试图使用可能是全局的(因为前面缺少"var"(。Javascript从开始到结束，从左到右(为了更容易理解，假设是这样(，从上到下运行。

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

为了解决您的问题，您可能需要交换代码中的一些行，这样就可以设置使用的变量，然后使用THEN，而不是相反。

相关文章：