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

时间:2018-03-05 03:18:52

标签: javascript html image conditional

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

//user score is 0
var userscore = 0;

//this is question 1

var question1 = prompt('What is 2 + 2?');

if (question1 === "4") 
{ userscore = userscore +1;
	alert("Congrats thats right!");}

else { alert("that is incorrect try again")}

//this is question 2 

var question2 = prompt('What is 2 * 2?');

if(question2==="4")
 { userscore = userscore +1;
 	alert("Congrats thats right!")}

 else {alert("that is incorrect try again")}

//this is question 3

 var question3 = prompt("what is 20 + 5?");
if(question3 === "25")
{userscore = userscore +1;
	alert("Congrats thats right!")}

	else{alert("that is incorrect try again")}

//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("You have a score of 0, your a complete idiot.")}

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

3 个答案:

答案 0 :(得分:1)

而不是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作为路径。

答案 1 :(得分:0)

这不是一个好方法。但在你的情况下,这是有效的。只需用img标签

替换字符串即可
<img  src='image_name.extension' /> 

请记住使用单引号

//user score is 0
var userscore = 0;

//this is question 1

var question1 = prompt('What is 2 + 2?');

if (question1 === "4") 
{ userscore = userscore +1;
	alert("Congrats thats right!");}

else { alert("that is incorrect try again")}

//this is question 2 

var question2 = prompt('What is 2 * 2?');

if(question2==="4")
 { userscore = userscore +1;
 	alert("Congrats thats right!")}

 else {alert("that is incorrect try again")}

//this is question 3

 var question3 = prompt("what is 20 + 5?");
if(question3 === "25")
{userscore = userscore +1;
	alert("Congrats thats right!")}

	else{alert("that is incorrect try again")}

//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

答案 2 :(得分: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>

尝试以相同的方式实施评分指南(使用该功能)。然后添加更多问题和答案将很容易。也不是使用普通的javascript进行这种工作,更好地使用像JQuery这样的javascript框架。它会更清洁,更容易。