CODEWITHSUNDEEP
javascriptjqueryobjectthissetinterval
JHillman
JHillman

Reputation: 29

jQuery - Making new div on interval

So what I'm trying to do here is make a page that spawns a new random color and size box every 2 seconds, that are removed when I click on them. The problem is, the first box gets created with no problem, but after that, I get the error that my function "makeDiv" is not defined every 2 seconds.

Am I missing something?

setInterval('makeDiv', 2000);

(function makeDiv() {
    var divsize = ((Math.random() * 100) + 50).toFixed();
    var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width': divsize + 'px',
        'height': divsize + 'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position': 'absolute',
        'left': posx + 'px',
        'top': posy + 'px',
        'display': 'none'
    }).appendTo('body').fadeIn(100)

    $("div").click(function() {
        $(this).remove();
    });

})();

Upvotes: 1

Views: 130

Answers (3)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

the problem is .. you used makeDiv in setinterval as a function but you use it in (function(){}); and its looks like its in $(document).ready() so it just worked for the first time .. it worked itself after document ready not working in setinterval .. so what I did here is just make a clear function .. with function makeDiv(){} not (function makeDiv(){}()); and about 

$(document).on('click' , 'div',function() {
    $(this).remove();
});

I prefer to use the code one time not repeat it with every setInterval so I used this code outside the function instead of use it inside like 

$("div").click(function() {
    $(this).remove();
});

Demo

$(document).on('click' , 'div',function() {
    $(this).remove();
});

setInterval('makeDiv()', 2000);

function makeDiv() {
    var divsize = ((Math.random() * 100) + 50).toFixed();
    var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width': divsize + 'px',
        'height': divsize + 'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position': 'absolute',
        'left': posx + 'px',
        'top': posy + 'px',
        'display': 'none'
    }).appendTo('body').fadeIn(100);

};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Update Demo with animation

$(document).on('click' , 'div',function() {
    $(this).remove();
});

setInterval('makeDiv()', 2000);

function makeDiv() {
    var divsize = ((Math.random() * 100) + 50).toFixed();
    var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width': divsize + 'px',
        'height': divsize + 'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position': 'absolute',
        'left': posx + 'px',
        'top': posy + 'px',
        'display': 'none'
    }).appendTo('body').fadeIn(100).animate({'left' : '0px', 'right': $(window).width() - divsize} , 3000).animate({'right' : '0px', 'left': $(window).width() - divsize} , 3000);

};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Upvotes: 1

Nishanth Matha
Nishanth Matha

Reputation: 6081

This might not be the ideal ans but, this is an alternative you could try:

setInterval(function() {
    var divsize = ((Math.random() * 100) + 50).toFixed();
    var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width': divsize + 'px',
        'height': divsize + 'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position': 'absolute',
        'left': posx + 'px',
        'top': posy + 'px',
        'display': 'none'
    }).appendTo('body').fadeIn(100)

}, 2000);

$("div").click(function() {
    $(this).remove();
});

Upvotes: 0

brk
brk

Reputation: 50326

Not sure why you need the IIFE so I have make it as a normal function & calling

setInterval like this

setInterval(makeDiv, 2000);

Check this jsFiddle

Upvotes: 0

Related Questions