基本的 javascript 條件如何添加圖像？
[英]Basic javascript conditionals how do i add an image?
問題描述
好吧，這就是我被卡住的地方。 對於我在這個基本程序中的最后一個條件。 如果用戶的分數為 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 個解決方案
解決方案1
1 2018-03-05 03:24:05
而不是 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
-- 圖像.png
在這種情況下，您只需將/image.png作為路徑。
解決方案2
0 2018-03-05 03:50:33
這個方法不好。 但在你的情況下，這是有效的。 只需用 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
解決方案3
0 2018-03-05 11:51:23
首先，您應該避免一次又一次地復制粘貼相同的代碼。 相反，您可以重復使用相同的代碼，如下所示
<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）。 它會更干凈，更容易。
如何在JavaScript中為圖片添加工具提示（基於條件）？
[英]How do I add a tooltip (based on conditions) to an image in javascript?
如何使用javascript與cryptsy建立基本的Pusher連接？
[英]how do I do a basic pusher connection to cryptsy using javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.