基本javascript条件如何添加图像?

基本javascript条件如何添加图像?,javascript,html,image,conditional,Javascript,Html,Image,Conditional,好吧,这就是我被困的地方。这是我在这个基本程序中的最后一个条件。如果用户得到0分,我想添加一个图像。如何添加图像。我已经在.js和.html文件所在的文件夹中放了一张图片。但是插入我存档的图像的代码是什么。我在.js中写了笔记,所以你们可以理解 //用户分数为0 var-userscore=0; //这是问题1 变量问题1=提示(“2+2是什么?”); 如果(问题1==“4”) {userscore=userscore+1; 警惕(“恭喜你说得对!”;} 否则{alert(“这不正确,请重试”

好吧,这就是我被困的地方。这是我在这个基本程序中的最后一个条件。如果用户得到0分,我想添加一个图像。如何添加图像。我已经在.js和.html文件所在的文件夹中放了一张图片。但是插入我存档的图像的代码是什么。我在.js中写了笔记,所以你们可以理解

//用户分数为0
var-userscore=0;
//这是问题1
变量问题1=提示(“2+2是什么?”);
如果(问题1==“4”)
{userscore=userscore+1;
警惕(“恭喜你说得对!”;}
否则{alert(“这不正确,请重试”)}
//这是问题2
var question2=prompt('2*2是什么?');
如果(问题2==“4”)
{userscore=userscore+1;
警惕(“恭喜你说得对!”)
否则{alert(“这不正确,请重试”)}
//这是问题3
变量问题3=提示(“20+5是什么?”);
如果(问题3==“25”)
{userscore=userscore+1;
警惕(“恭喜你说得对!”)
否则{alert(“这不正确,请重试”)}
//计分指南
如果(userscore==2)
{document.write(“恭喜你以2/3的分数通过了考试”)}
如果(userscore==3)
{document.write(“恭喜你以3/3的分数通过了考试”)}
如果(userscore==1)
{document.write(“你以1/3的分数失败,你不是很聪明”)}
如果(userscore==0)
{document.write(“你的分数是0,你的孩子是个十足的白痴。”)}

//我想添加一个图像而不是document.write命令,如果他们收到的是0分而不是document.write,只需创建一个img元素,设置源,然后将其附加到目标(我编写了目标代码,如果您只想附加到body),如下所示:

    if(userscore === 0)
    {
      var img = document.createElement("img");
      img.src = "/score0.png";

      var src = document.getElementById("target"); //if you want a specific source
      //var src = document.body; if you just want to append to body
      src.appendChild(img);
   }
您需要将映像添加到项目的目录中,如下所示:

  • 项目目录
    --index.html
    --main.js
    --image.png

在这种情况下,您只需将
/image.png
作为路径

这不是个好方法。但在你的情况下,这是有效的。只需用img标记替换字符串

<img  src='image_name.extension' /> 

记住使用单引号

//用户分数为0
var-userscore=0;
//这是问题1
变量问题1=提示(“2+2是什么?”);
如果(问题1==“4”)
{userscore=userscore+1;
警惕(“恭喜你说得对!”;}
否则{alert(“这不正确,请重试”)}
//这是问题2
var question2=prompt('2*2是什么?');
如果(问题2==“4”)
{userscore=userscore+1;
警惕(“恭喜你说得对!”)
否则{alert(“这不正确,请重试”)}
//这是问题3
变量问题3=提示(“20+5是什么?”);
如果(问题3==“25”)
{userscore=userscore+1;
警惕(“恭喜你说得对!”)
否则{alert(“这不正确,请重试”)}
//计分指南
如果(userscore==2)
{document.write(“恭喜你以2/3的分数通过了考试”)}
如果(userscore==3)
{document.write(“恭喜你以3/3的分数通过了考试”)}
如果(userscore==1)
{document.write(“你以1/3的分数失败,你不是很聪明”)}
如果(userscore==0)
{document.write(“”)}

//我想添加一个图像而不是document.write命令,用于最后一行如果他们首先收到0分的分数,您应该避免一次又一次地复制粘贴相同的代码。相反,您可以重复使用相同的代码,如下所示

<html>
    <head>
            <script>
                //user score is 0
                var userscore = 0;

                // common function for question
                var questionFunc = function(question, answer){
                    var user_answer = prompt(question);

                    if (user_answer === answer) 
                    { 
                        userscore = userscore +1;
                        alert("Congrats thats right!");
                    }else { 
                        alert("that is incorrect try again");
                    }
                }

                //this is question 1
                questionFunc('What is 2 + 2?','4');

                //this is question 2
                questionFunc('What is 2 * 2?','4');

                //this is question 3
                questionFunc('what is 20 + 5?','25');



                //Scoring Guide


                if (userscore === 2)
                    {document.write("Congrats You have passed the test with a score of 2/3")}

                if(userscore === 3)
                    {document.write("Congrats You have passed the test with a score of 3/3")}

                if(userscore === 1)
                    {document.write("You Failed with a score of 1/3, you are not very Bright")}

                if(userscore === 0)
                    {document.write("<img  src='test.JPG' />")}

                //I want to add an image instead of the document.write command for the last line if they recieve a score o 0
            </script>
    </head>
    <body>

    </body>
</html>

//用户分数为0
var-userscore=0;
//问题的公共函数
var questionFunc=函数(问题,答案){
var user_answer=提示(问题);
如果(用户回答===回答)
{ 
userscore=userscore+1;
警惕(“恭喜你说得对!”);
}否则{
警告(“这不正确,请重试”);
}
}
//这是问题1
questionFunc(‘什么是2+2?’,‘4’);
//这是问题2
questionFunc(‘什么是2*2?’,‘4’);
//这是问题3
问题函数(‘20+5是什么?’,‘25’);
//计分指南
如果(userscore==2)
{document.write(“恭喜你以2/3的分数通过了考试”)}
如果(userscore==3)
{document.write(“恭喜你以3/3的分数通过了考试”)}
如果(userscore==1)
{document.write(“你以1/3的分数失败,你不是很聪明”)}
如果(userscore==0)
{document.write(“”)}
//如果他们的分数为0,我想在最后一行添加一个图像而不是document.write命令

尝试以同样的方式实施评分指南(使用该功能)。然后添加更多问题和答案将很容易。对于这种工作,最好使用JQuery之类的javascript框架,而不是使用普通的javascript。这会更干净更容易

我会将img添加到html文件还是.js文件?@fahimsterrrr检查我的解决方案,如果您有任何问题,请告诉我。如果可行,请将其标记为正确,以便其他可能有类似问题的人看到答案。
document.body
是简单的,因此我的图像文件名为score0.png,在If(userscore==0)之后,我会写{var img=document.createElement(“score0.png”)}如果分数为0,我只想显示图像,屏幕上没有其他内容。图像将添加到目录如果图像与is文件位于同一目录中,则只需执行
img.src=“/score0.png“
否则告诉我你的项目目录看起来像什么我看不懂你的心思不要弄乱创建元素,你把路径放在
img,src
我已经为你更新了答案。@Fahimsterrrr这有什么帮助吗?谢谢你的方法奏效,