Creating html with javascript not working

Question

I am attempting to create this with javascript so that i can repeat it as many times as I'd like

<div class="parallax-item">
<img src="http://freepngimages.com/wp-content/uploads/2015/10/bubble-transparent-background.png" alt="BUBBLE">
</div>

Here is the Javascript that I did, but when I run it nothing happens.

var makeBubbles = function (numOfBubbles) {
      var div = document.createElement("div");
      div.className = "parralax-item";
      div.id = 'num' + numOfBubbles + 'div';
      document.getElementById("main").appendChild(div);
      var image = document.createElement("IMG");
      image.src = "http://freepngimages.com/wp-content/uploads/2015/10/bubble-transparent-background.png";
      image.alt = "BUBBLE";
      document.getElmentById('num' + numOfBubbles + 'div').appendChild(image);
      numOfBubbles --;
      if (numOfBubbles > 0) {
        makeBubbles(numOfBubbles);
      }
    };
    
    makeBubbles(9);

Where did i go wrong? Also where could i see the changes that this makes to the html so that i could do some testing?

Possible duplicate of [Uncaught TypeError: Cannot read property 'appendChild' of null](https://stackoverflow.com/questions/30014090/uncaught-typeerror-cannot-read-property-appendchild-of-null) — Serge K., Feb 20 '19 at 16:22
Check out the inspection tool that Chrome has, it should help you see the HTML that is generated. I would also check the console to see where it is/isn't falling over. Lastly, is the code running before the div with id "main" is created? — David Duffy, Feb 20 '19 at 16:22

Lolpez · Accepted Answer · 2019-02-23T23:39:24.557

You got a TypeError, it is getElementById, not getElmentById

var makeBubbles = function (numOfBubbles) {
      var div = document.createElement("div");
      div.className = "parralax-item";
      div.id = 'num' + numOfBubbles + 'div';
      document.getElementById("main").appendChild(div);
      var image = document.createElement("IMG");
      image.src = "http://freepngimages.com/wp-content/uploads/2015/10/bubble-transparent-background.png";
      image.alt = "BUBBLE";
      document.getElementById('num' + numOfBubbles + 'div').appendChild(image);
      numOfBubbles --;
      if (numOfBubbles > 0) {
        makeBubbles(numOfBubbles);
      }
    };
    
    makeBubbles(9);

<div id="main"></div>

score 0 · Answer 2 · answered Feb 20 '19 at 16:29

There are two problems with your code

First there is no element with id = main.
You are using document.getElmentById missing e

See the working code

var makeBubbles = function (numOfBubbles) {
      var div = document.createElement("div");
      div.className = "parralax-item";
      div.id = 'num' + numOfBubbles + 'div';
      document.getElementById("main").appendChild(div);
      var image = document.createElement("IMG");
      image.src = `http://freepngimages.com/wp-content/uploads/2015/10/bubble-transparent-background.png`;
      image.alt = "BUBBLE";
      document.getElementById('num' + numOfBubbles + 'div').appendChild(image);
      numOfBubbles --;
      if (numOfBubbles > 0) {
        makeBubbles(numOfBubbles);
      }
    };
    
    makeBubbles(9);

<div id="main"></div>

Creating html with javascript not working

2 Answers2