Below is a function that triggers when a button is clicked, adding 30 div elements to the document with specific attributes.
var bar_counter = 0;
bar_lengths = new Array();
function createBar(btnObj)
{
while(bar_lengths.length < 30){
var size = Math.floor(Math.random() * (50 - 1) ) + 1;
if(size>50)
{
alert("Please enter a value between 1 and 50 only!");
}
else{
if(bar_lengths.indexOf(size) === -1){
bar = document.createElement("div");
bar_counter = parseInt(bar_counter) + parseInt(1);
bar.setAttribute("class","bars");
bar.setAttribute("name","bar"+bar_counter);
bar.setAttribute("id",size);
bar.style.height=10*size+"px";
var color1 = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
var color2 = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
bar.style.backgroundImage="linear-gradient(359deg,"+color1+","+color2+")";
bar.insertAdjacentHTML("beforeend","<font color='red' style='vertical-align: text-bottom; background-color:white'>"+size+"</font>");
bar.insertAdjacentHTML("beforeend","<font color='red' style='vertical-align: text-bottom; background-color:white'> </font>");
var place_to_insert = document.getElementById("placeBars");
place_to_insert.appendChild(bar);
bar_lengths.push(size);
}
}
}
btnObj.disabled=true;
temp="";
for(var i= 0; i < bar_lengths.length; i++) {
temp = temp+bar_lengths[i]+" , ";
}
document.getElementById("YourArray").innerHTML = temp;
}
While the function works flawlessly, the browser window instantly fills with 30 div elements upon button click. I am looking to introduce a delay in the loop to show each div being added one by one. I attempted using setTimeout() and setInterval() functions without success. Any suggestions would be greatly appreciated. Thanks in advance.
~regards