为什么图像不显示为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()函数。由于check()功能是作为areaquestion1()功能的一部分运行的，因此它也正在运行，因此即使在输入答案之前也依次显示“不正确”。我将其更改为document.getElementById("solve").check();以确保它仅在CHECK之后运行！按钮被单击。
最后解决您的实际问题。似乎您正在尝试使用document.createElement创建具有id为question的图像，但是基于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.如果您在areaquestion2函数中调用areaquestion1，它将在网站加载后立即运行（您在加载时调用区域Question1）。我认为这将使两个图像同时出现。为什么？它只是被指示将另一个图像附加到问题div。 2.您可能不希望两个图像同时出现。因此，您将需要找到一种方法来替换第一个图像，而不是尝试添加另一个图像。

这就是我目前可以为您提供的所有帮助。我认为，如果您继续进行此工作然后对其进行重构，那么您将学到很多东西。我认为您应该尝试通过将问题分配给变量，然后将这些变量作为参数传递给函数来将其引入一个函数。如果您还没有的话，我强烈建议您逐步学习FreeCodeCamp的入门课程。

希望这有所帮助！

为什么图像不显示为document.createElement

问题描述投票：0回答：1

1个回答

最新问题

为什么图像不显示为document.createElement

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1