為什么圖像沒有出現在 document.createElement 中

Question

我是一個非常新手的編碼員，我正在創建一個計算給定矩形面積的游戲，但是一旦頁面加載，圖像就不會顯示，因此用戶無法回答問題。

下面復制了一個示例圖像

“分數”也不顯示。 任何幫助將不勝感激：）

 var number1; var number2; var response; var calcanswer; var score = 0; window.onload = areaquestion1; myScore.text = "SCORE: " + score; function areaquestion1() { var question = document.createElement("question"); question.setAttribute("src", "Images/2*1.png"); question.setAttribute("width", "304"); question.setAttribute("height", "228"); question.setAttribute("alt", "2*1"); document.body.appendChild(question); var number1 = 2 var number2 = 1 calcanswer = (number1*number2); var question = document.getElementById("question"); question.innerHTML = "What is the area of this lego brick?"; check(); areaquestion2(); } function areaquestion2() { var question = document.createElement("question"); question.setAttribute("src", "Images/3*2.png"); question.setAttribute("width", "304"); question.setAttribute("height", "228"); question.setAttribute("alt", "3*2"); document.body.appendChild(question); var number1 = 3 var number2 = 2 calcanswer = (number1*number2); var question = document.getElementById("question"); question.innerHTML = "What is the area of this lego brick?"; check(); areaquestion3(); } function check() { var statusDiv = document.getElementById("status"); response=document.getElementById("answer").value; if(response != calcanswer) statusDiv.innerHTML="Incorrect"; else if (response==calcanswer) { statusDiv.innerHTML="Very good!"; score ++; document.getElementById("score").textContent = score document.getElementById("answer").value = ""; problem(); } }

 <!DOCTYPE html> <html> <title>Lego Area</title> <head> <link rel="stylesheet" href="CSS/Play.css"> <script src="JavaScript/Play.js"></script> </head> <body onload="areaquestion1();"> <div class="header"> <h1>LEGO AREA</h1> <p>Calculating <b>area</b> with Emmet.</p> <div id="score" class="score" value="SCORE:"></div> </div> <form> <div class="row"> <div class="side"> <div id="question"></div> <div id ="prompt"></div> <input type="text" id="answer"/> </div> <div class="main"> <input id="solve" type="button" value="CHECK!" onclick="check()" /> </div> </div> </form> <div id="status"></div> <!-- Footer --> <div class="footer"> <div class="practice"> <a href="Practice.html"><img src="Images/legoBlue2.png" id="practicebtn" width="20%"></a></div> <div class="play"> <a href="Play.html"><img src="Images/legored2.png" id="playbtn" width="20%"></a></div> </div> </body> </html>

Answer 1

這是我試圖回答的第一個問題——非常重要。 反正...

我注意到的一些事情：

看到question變量在代碼的不同部分被大量使用，我在閱讀代碼時感到非常困惑。 因此，我將var question更改為var imageBlock以使其對我更具可讀性。
您正在運行areaquestion1()函數 onload。 由於check()函數是作為areaquestion1()函數的一部分運行的，因此它也正在運行，甚至在輸入答案之前依次顯示“不正確”。 我將其更改為document.getElementById("solve").check(); 以確保它僅在 CHECK 之后運行！ 按鈕被點擊。
終於到了你的實際問題。 看起來您正在嘗試使用document.createElement來創建一個帶有question id的圖像，但是基於geeks for geeks和W3 Schools，您使用document.createElement來創建img元素。 然后您可以將 id 屬性設置為您喜歡的任何內容。 在這種情況下，我將其切換為imageBlock.setAttribute("id", "madeUpImg"); 幫助我提高可讀性。

所以這就是我所做的，我認為您可以進行很多改進，但這很有效，它將為您提供一個良好的開端：

function areaquestion1() {
var imageBlock = document.createElement("IMG");
imageBlock.setAttribute("id", "madeUpImg");
imageBlock.setAttribute("src", "guWFE.png");
imageBlock.setAttribute("width", "304");
imageBlock.setAttribute("height", "228");
imageBlock.setAttribute("alt", "2*1");
document.body.appendChild(imageBlock); // this appends it to the bottom of the page
number1 = 2
number2 = 1
calcanswer = (number1*number2);
var question = document.getElementById("question");
question.innerHTML = "What is the area of this lego brick?";
document.getElementById("solve").check();
// areaquestion2(); }

所有這些都經過編輯以解決您的進一步問題：

將它附加到適當的位置：我沒有時間跳回到我的代碼中，但這就是我的想法。 目前，當你閱讀你的代碼時，你有document.body.appendChild(question); 該 JavaScript 告訴計算機查找文檔，然后查找該文檔的正文，然后運行 appendChild 函數。 所以，基本上它是說 - “計算機，將問題變量附加到文檔正文”。 那么，這有什么問題呢？ 好吧，您想將其附加到特定的div ！ 所以，你非常接近，但你沒有抓住question div ！ 您需要使用代碼告訴計算機找到問題 div，然后將圖像附加到該 div。 我會做這樣的事情： document.getElementById('question').appendChild(imageBlock)這現在意味着代碼正在抓取您想要將其附加到的 div，然后將imageBlock附加到該div 。
我注釋掉了areaquestion2因為我知道你會遇到更多的問題。 1. 如果您在areaquestion1函數中調用areaquestion2 ，它將在網站加載時立即運行（您在加載時調用區域 question1）。 我認為這將使兩個圖像同時出現。 為什么？ 它只是被指示將另一個圖像附加到問題 div。 2. 您可能不希望兩個圖像同時出現。 因此，您需要找到一種方法來替換第一個圖像，而不是嘗試添加另一個圖像。

目前我能幫到你的就這些了。 我認為如果你繼續解決這個問題然后重構它，你會學到很多東西。 我認為您應該嘗試通過將問題分配給變量，然后將這些變量作為參數傳遞給您的函數來嘗試將其帶到一個函數中。 如果您還沒有，我強烈建議您逐課學習 FreeCodeCamp 的內容。

希望這有幫助！！

為什么圖像沒有出現在 document.createElement 中

問題描述

1 個解決方案

解決方案1
1 2020-03-24 04:02:33

為什么圖像沒有出現在 document.createElement 中

問題描述

1 個解決方案

解決方案1 1 2020-03-24 04:02:33

解決方案1
1 2020-03-24 04:02:33