CODEWITHSUNDEEP
javascriptdom
Hamish Mc Duff
Hamish Mc Duff

Reputation: 1

Why are the images not coming up for document.createElement

I am a very novice coder and I am creating a game that calculates the area of a given rectangle however once the page loads, the image does not show and thus the user cannot answer the question.

An example image has been copied below

example

The "score" does not display either. Any help would be greatly appreciated :) 

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>

Upvotes: 0

Views: 423

Answers (1)

Nate Gervenak
Nate Gervenak

Reputation: 125

This is my first question I'm attempting to answer -- so pretty big deal. Anyway...

A few things I noticed:

  1. I got pretty confused reading the code seeing the question variable being used so much for different parts of the code. So I changed the var question to var imageBlock to make it more readable for me.

  2. You were running the areaquestion1() function onload. Since the check() function was run as a part of the areaquestion1() function it was being run as well, in-turn displaying 'Incorrect' even before an answer was entered. I changed this to document.getElementById("solve").check(); to ensure it runs only after the CHECK! button was clicked.

  3. Finally getting to your actual question. It looks like you are trying to use document.createElement to create an image with an id of question, however based on geeks for geeks and W3 Schools you use the document.createElement to create the img element. THEN you can set the id attribute to whatever you like. In this case, I switched it to imageBlock.setAttribute("id", "madeUpImg"); to help with my readability.

So this is what I did, I think there are a lot of improvements you can make, but this works and it will give you a good start:

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(); }

All of this is edited to address your further questions:

  1. For appending it in the appropriate spot: I haven't had time to jump back in my code, but this is what I'm thinking. Currently, when you read your code you have document.body.appendChild(question); This JavaScript is telling the computer to find the document, then find the body of that document, then run the appendChild function. So, basically it is saying - "computer, append the question variable to the body of the document". So, what's wrong with this? Well, you want to append it to a specific div! So, you're extremely close, but you're not grabbing the question div! You need to use code to tell the computer to find the question div, then append the image to that div. I'd do something like this: document.getElementById('question').appendChild(imageBlock) this now means the code is grabbing onto the div that you want to append it to then, appending the imageBlock to that div.

  2. I commented out that areaquestion2 because I know you're going to run into more problems. 1. If you call the areaquestion2in the areaquestion1 function it will run immediately when the website loads (you're calling the area question1 on load). I think this is going to make both images appear at the same time. Why? It is just being instructed to append another image to the question div. 2. You probably don't want both images appearing at the same time. So, you're going to need to find a way to replace the first image rather then trying to add another one.

That's about all I can help you with on this for now. I think that if you continue to work through this then refactor it, you're going to learn a ton. I think you should try to bring this to one function by assigning questions to variables, then passing those variables in as arguments to your function. If you haven't already, I'd highly recommend going through FreeCodeCamp's stuff lesson by lesson.

Hope this helped!!

Upvotes: 1

Related Questions