+ 2
Please help me
please help me make div infinite have a interval 1000 with loop
13 Answers
+ 14
window.onload = function ()
{
// Interval of 1000
setInterval(function(){
// Create the element
var div = document.createElement("div");
// Style the element
div.style.width = "50px";
div.style.height = "50px";
div.style.border = "5px solid red";
// Append the element
document.body.appendChild(div);
}, 1000)
}
You have no need of loops, but if you want... you can insert the setInterval() in a while (true) { ... } loop.
- Sorry but today my CodePlayground has some problems and i can't test it with the loop. -
[ EDIT for @visph ]
You are right! But for completeness, i want to said it.
The best practice is "add a counter in your loop", or... in this case, use my function without any loops, because it's not necessary. =^=
+ 11
@visph, that's why i don't used a loop, anyway your code is perfect for his question, i did not think to use innerHTML property for make a div in a loop!
+ 5
Please reformulate your question more accuratly to be understood ^^
Would you generate html <div> element infinitly? This will necessarly end in a memory overflow error :P
You need to limit the longer of the document generated...
Anyway, do you talk about time interval or <div> height, or space between height? What's the unit of your '1000"?
So... do you want generate it at run-time? Inside an html document, or as a new html content?
+ 5
@Maz: With the infinite loop, you will crash your app ^^
+ 5
@Maz wrote:
<< [ EDIT for @visph ]
You are right! But for completeness, i want to said it.
The best practice is "add a counter in your loop", or... in this case, use my function without any loops, because it's not necessary. =^= >>
Without any loop, it's not what's expected ;P
Well to do an infinite loop creating a new div every minutes and without using setTimeout/setInterval, you can save tthe creation time of the last div, and test inside the loop if time ellapsed greater than 1 minute ( 1000 milisecondes ) for creating a new <div>:
window.onload = function() {
var now, last=0;
while (true) {
now = Date.now();
if ((!last)||(now-last>1000)) {
last = now;
document.body.innerHTML+='<div style="height:20px; background:red; margin:3px;">div content</div>';
}
}
}
Anyway, if you success to execute it ( in android web browers code playground it make the tab freeze -- not responding, only solution is to close the tab ), you need to be aware to not let it run too much long time, as you can even freeze a desktop pc, with only solution of hard reboot :P ( personnaly I prefer no longer test it, those thing becomes already too much often without expecting them ^^ )
+ 5
@Maz: innerHTML is the lazy solution :P even if there's cases where it can be more efficient than using the DOM API ;)
+ 4
Why do you want infinite loop?
Are you expecting ADDING <div> infinitly, or just changing a <div> content infinitly?
In the second case, you can do it infinitly without memory overflow, but without loop ( as infinite loop will consume also infinite memory, even if less quickly than adding <div> infinitly ^^ )
[ edit ]
"infinite loop will consume infinte memory"... in this context ( calling setTimeout() )
+ 3
@Maz
if you don't mind.
Here is your code in my code playground
https://code.sololearn.com/WoUP0kS7ISlS/?ref=app
+ 3
@Kristina
Do it in loop is easier but like most sequential programs, in javascript, you can't do loop forever, it will freeze the cpu for handling other tasks. You must exist the loop after certain execution period, the best way to do looping is in timer using setInterval
+ 2
only want to use setinterval and ever minute make a div
+ 2
ok I want with loop
+ 2
how to make infinite loop make my div
+ 2
@calvin I write it with creat but wanna with loop I can do it