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

【问题标题】：Basic javascript conditionals how do i add an image?基本的 javascript 条件我如何添加图像？
【发布时间】：2018-08-12 16:03:55
【问题描述】：

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

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/HTML/Element/img
我是将 img 添加到 html 文件还是 .js 文件中？？？
@fahimsterrrrr 检查我的解决方案，如果您有任何问题，请告诉我。如果有效，请将其标记为正确，以便可能有类似问题的其他人看到答案。

标签： javascript html image conditional

【解决方案1】：

而不是 document.write，只需创建一个 img 元素，设置源，然后将其附加到目标（我编写了目标代码，如果您只想附加到正文），例如：

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

【讨论】：

document.body 更简单
所以我的图像文件的名称是 score0.png，在 if(userscore===0) 之后我会写 {var img = document.createElement("score0.png)} 我只想分数为 0 时显示的图像在屏幕上没有其他内容。图像被添加到目录中
如果图像与您的 is 文件位于同一目录中，则只需执行 img.src = "/score0.png" 否则请告诉我您的项目目录是什么样的，我无法读懂您的想法
不要乱用create元素，你把路径放在img,src里，我已经为你更新了答案。
@fahimsterrrrr 这有帮助吗？

【解决方案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

【讨论】：

感谢您的方法有效，但是编写代码以获得此图像的好方法是什么？我正在尝试按照第一个回答者告诉我的方式编写代码，但没有成功，当分数为 0 时，我没有得到任何答案。
你为什么发布 2 个答案？
无法以评论的形式回答他的第二个问题（在评论部分）

【解决方案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 来完成这种工作，最好使用 javascript 框架，如 JQuery。它会更干净，更容易。

【讨论】：