基本的 javascript 条件如何添加图像？
[英]Basic javascript conditionals how do i add an image?
问题描述
alright so this is where I am stuck.
好吧，这就是我被卡住的地方。 For my last conditional in this basic program.对于我在这个基本程序中的最后一个条件。 I want to add an image if the user receives a score of 0. How do i add an image.如果用户的分数为 0，我想添加图像。如何添加图像。 I already put a picture in the folder where the .js and .html files are.我已经在 .js 和 .html 文件所在的文件夹中放了一张图片。 But whats the code to insert that image i have on file.但是插入我存档的那个图像的代码是什么。 I wrote notes in the .js so you guys can maybe understand.我在 .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 个解决方案
解决方案1
1 2018-03-05 03:24:05
Instead of document.write, just create a img element, set the source, then append it to a target (and I wrote target code and if you just want to append to body instead), as such:而不是 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);
}
You'll want to add the image to the directory of your project, as such:您需要将图像添加到项目目录中，如下所示：
- Project Directory项目目录
-- index.html-- index.html
-- main.js-- main.js
-- image.png-- 图像.png
In which case, you'd just put /image.png as the path.在这种情况下，您只需将/image.png作为路径。
解决方案2
0 2018-03-05 03:50:33
This not good method.这个方法不好。 But in your case, this works.但在你的情况下，这是有效的。 Just replace the string with img tag只需用 img 标签替换字符串
<img src='image_name.extension' />
Remember to use single quotes .请记住使用单引号。
//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
解决方案3
0 2018-03-05 11:51:23
First, you should avoid copy paste same code again and again.首先，您应该避免一次又一次地复制粘贴相同的代码。 Instead you can reuse the same code as follows相反，您可以重复使用相同的代码，如下所示
<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>
Try to implement Scoring Guide also in the same manner (using the function).Then adding more questions and answers would be easy.尝试以相同的方式（使用该功能）实现评分指南。然后添加更多问题和答案将很容易。 An also rather than using plain javascript for this kind of work, better to use javascript framework like JQuery.与使用纯 javascript 进行此类工作相比，最好使用 javascript 框架（如 JQuery）。 It would much cleaner and easier.它会更干净，更容易。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.