adding images to document in loop

Question

I have written this javascript code to add images each after a delay of 3 seconds but this code is not working kindly help.

function start() {
    while(true) {
        setTimeout(addObstracles(), 3000)
    }
}

function addObstracle() {
        var element = document.createElement('img');    
        element.id = 'obs';
        element.className = 'obstracleAnimation';
        element.src = 'enemy.png';
        element.style.position = 'absolute';
        element.style.top = '0px';
        element.style.left = '100%';
        element.style.width = '150px';
        element.style.height = '100px';
        document.body.appendChild(element);
}

Perhaps because you're *calling* addObstracles in your `setTimeout` call, and that method doesn't return anything.. — Mike Christensen, Dec 15 '15 at 22:30
Possible duplicate of [javascript setTimeout() not working](http://stackoverflow.com/questions/20890943/javascript-settimeout-not-working) — Sheepy, Dec 16 '15 at 07:05

score 3 · Answer 1 · answered Dec 15 '15 at 22:30

3

setTimeout takes a function reference. You have a function invokation.

There are multiple ways to write this out:

setTimeout('addObstracles()', 3000) //i don't like this way
setTimeout(addObstracles, 3000) // pass the reference (I like this way!)
setTimeout(function() {
    addObstracles()
}, 3000) //I like this when `addObstracles has parameters!

answered Dec 15 '15 at 22:30

Sterling Archer

20,452
15
77
107

1

He also calls addObstacles instead of addObstacle. – NovaLogic Dec 15 '15 at 22:34
@SajalAli check your JavaScript console and you'll see some nice red error messages that will help you out – Sterling Archer Dec 15 '15 at 22:35

razz · Answer 2 · 2015-12-15T22:59:17.693

2

Like Sterling mentioned in his anser, you are calling the function addObstracles instead of passing it to setTimeout, just i want to add to it that because you are setting timout functions on fixed intervals you can use setInterval function instead:

function start() {
    setInterval (addObstracles, 3000);
}

JSFiddle

edited Dec 15 '15 at 22:59

answered Dec 15 '15 at 22:36

razz

8,452
6
45
61

still not working, this freezes the browser – Sajal Ali Dec 15 '15 at 22:41
`id` attribute is unique, you can assign it to one element only, remove `element.id = 'obs';` from your code. – razz Dec 15 '15 at 22:51

score 0 · Answer 3 · answered Dec 15 '15 at 22:54

There are multiple issues with this code. I will add to the answers the following:

be careful what function you define and what function you call: something != somethings
be careful where you call your start() function: it has to be after the body tag or body.appendChild won't exist
be careful how you style your element. With the current styling, it is not displayed at all. I have just removed element.style.position = 'absolute'; to make it visible
make sure the image you are trying to display is in the same folder as the script

adding images to document in loop

3 Answers3