Question

好吧，这就是我被卡住的地方。对于我在这个基本程序中的最后条件。如果用户得分为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

Answer 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作为路径。

Answer 2

这不是一个好方法。但在你的情况下，这是有效的。只需用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

Answer 3

首先，您应该避免一次又一次地复制粘贴相同的代码。相反，您可以重复使用相同的代码，如下所示

<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框架。它会更清洁，更容易。

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

3 个答案: