CODEWITHSUNDEEP
javascripthtml
chatlover
chatlover

Reputation: 93

Using RemoveChild and AppendChild in JavaScript

I’m trying to teach myself JavaScript and making a little game. The game consists of where you use your arrow keys and move around a closed area on a html document with an image (lets call it main) that will move in the direction you want. The object randomly appears one time on the screen and when the main image is on top of it, the object disappears.

I’ve been using apendChild to make the image appears randomly with Math.Random. The object moves, but what is missing is how to get rid of the image after moving on top of the image. How would you do this? Another Remove Child, or something else?

The code is over 150 lines. This is a snap of where I have put the appendChild and the removeChild, but not sure if this is the right way. I have also called up a location called toPlay() that will set the Interval and docReady.

var imgC = document.createElement("img");
imgC.src = “image.jpg”;
imgC.id = "food";


   function man() {    

     var food1 = document.getElementById("food");
     var man1 = document.getElementById("man");
     var blue = Math.floor(Math.random()*3);

     if(blue === 0) {
       var box1 = document.getElementById("box").appendChild(imgC);

       var manTop = (Math.floor(Math.random() * 20) *25);
       var manLeft = (Math.floor(Math.random() * 20) * 25);   

       food.style.position = 'absolute';
       food.style.top = manTop + "px";
       food.style.left = manLeft + "px";
     }
       else {
       var box = document.removeChild(box1); 
     } 
   }

   function toPlay() { 
     setInterval(man, 5000);
   }

   function docReady() {
     window.addEventListener('keydown', moveSelection); 
   }
   toPlay();

Upvotes: 2

Views: 2041

Answers (3)

RobG
RobG

Reputation: 147363

In your code:

var imgC = document.createElement("img");
imgC.src = “image.jpg”;
imgC.id = "food";

   function man() {    

   var food1 = document.getElementById("food");

That seem superfluous since you already have a reference to that element as imgC. And if imgC hasn't been added to the document, food1 will be null.

   if(blue === 0) {
     var box1 = document.getElementById("box").appendChild(imgC);

this creates yet another reference to imgC as box1.

...
     else {
         var box = document.removeChild(box1);

box1 (aka imgC) is attached to the node with id "box", not the document, removeChild only works on immediate children of a node, not any descendant. To remove a node generally, you can use:

  imgC.parentNode.removeChild(imgC);

or in this specific case, since imgC is a child of the node with id "box":

document.getElementById("box").removeChild(imgC);

Upvotes: 0

bobkingof12vs
bobkingof12vs

Reputation: 680

box1 falls out of scope once the function has finished executing.

So when you call var box = document.removeChild(box1); it won't find an element called box1

var imgC = document.createElement("img");
imgC.src = “image.jpg”;
imgC.id = "food";

var box1;// <-- this grants global scoping, which is bad, but solves you problem ;)
function man() {

    var food1 = document.getElementById("food");
    var man1 = document.getElementById("man");
    var blue = Math.floor(Math.random()*3);

    if(blue === 0) {
        //removing var from here removes the local scope and allows box1 to persist.
        box1 = document.getElementById("box").appendChild(imgC);

        var manTop = (Math.floor(Math.random() * 20) *25);
        var manLeft = (Math.floor(Math.random() * 20) * 25);


        food1.style.position = 'absolute';
        food1.style.top = manTop + "px";
        food1.style.left = manLeft + "px";
    }
    else {
        //you can then call it like this
        document.getElementById("box").removeChild(box1);
        //or imgC.parentNode.removeChild(imgC) like RobG points out
    }
}

function toPlay() {
    setInterval(man, 5000);
}

function docReady() {
    window.addEventListener('keydown', moveSelection);
}
toPlay();

Upvotes: 1

pishpish
pishpish

Reputation: 2614

You should remove the child from the parent element:

document.getElementById("box").removeChild(imgC);

Upvotes: 1

Related Questions