showing random value in div element with javascript

Question

I want my div element to work like a timer and shows random numbers with an interval of 1s. http://jsfiddle.net/NHAvS/46/. That is my code:

var arrData = [];
for (i=0;i<1000;i++)
{
      arrData.push({"bandwidth":Math.floor(Math.random() * 100)});
}

var div = document.getElementById('wrapper').innerHTML =arrData;
document.getElementById('wrapper').style.left = '200px';
document.getElementById('wrapper').style.top = '100px';

but the problem is that it only shows 1 data at a time. any idea how to fix it?

Thanks

Put it in a function and call it every second using setInterval(). — Barmar
– Barmar, Commented Aug 26, 2013 at 18:22
I wanted to expand on the other replies: Your web browser tab is essentially single threaded to the developer. That is, page rendering and execution of scripts run serially, one after the other. For that reason, the SetInterval/SetTimeOut functions (google them for the proper casing) exist. — Warty
– Warty, Commented Aug 26, 2013 at 18:28

Muhammad Umer · Accepted Answer · 2013-08-26 18:31:27Z

2

Do this:

setInterval(myfun,1000);

var div = document.getElementById('wrapper');
function myfun(){
   div.innerHTML ='bandwidth :'+Math.floor(Math.random() * 100);
}

Take a Look: http://jsfiddle.net/techsin/NHAvS/49/

Note: your example was messed up as on left side it was set to load in head which means your div would be undefined every time your script loads before your dom. so setting it to onload make it works little more. :D

Note: also you seem to be chaining functions as in jquery, but in javascript you don't do that. The functions are made to do that. i.e. div= ..getElementById..innerHtml='balbla'; would set div = bla... not element.

edited Aug 26, 2013 at 18:31

answered Aug 26, 2013 at 18:25

Muhammad Umer

18.3k26 gold badges111 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sasha_8 Over a year ago

Thanks, and what if I want to show it on a specific place in the page, I have added this: document.getElementById('wrapper').style.left = '50px'; document.getElementById('wrapper').style.top= '100px'; but it does not work

Muhammad Umer Over a year ago

1st choose the answer when it has answered your question. And do you want position to be random too. If not then you should specify position in css. Which can be done easily but you need to answer this. Do you want it to be fixed in reference to page or browser.

Muhammad Umer Over a year ago

document.getElementById('wrapper').style.position= 'relative'; put this before you write the code you told me in comments.OK

Mark Erasmus · Accepted Answer · 2013-08-26 18:45:21Z

0

You're better off using jQuery and CSS to achieve your desired result. jQuery to find the element and to display the random number; and CSS instead of manually setting the position. (Obviously jQuery is just a personal choice and document.getElementById will suffice - but if you're planning on manipulating the DOM a lot, jQuery is probably a better route to take). See updated fiddle

$(function () {
    var arrData = [];
    for (i = 0; i < 1000; i++) {
        arrData.push({
            "bandwidth": Math.floor(Math.random() * 100)
        });
    }

    var index = 0;

    setInterval(function(){
        $("#wrapper").text(arrData[index].bandwidth);
        index++;
    }, 1000);    
});

edited Aug 26, 2013 at 18:45

answered Aug 26, 2013 at 18:37

Mark Erasmus

2,4257 gold badges26 silver badges37 bronze badges

2 Comments

Sasha_8 Over a year ago

Thanks, and what if I want to show it on a specific place in the page, I have added this: document.getElementById('wrapper').style.left = '50px'; document.getElementById('wrapper').style.top= '100px'; but it does not work –

Mark Erasmus Over a year ago

Easily done using jQuery and absolute positioning: updated jsFiddle

Simone · Accepted Answer · 2013-08-26 18:24:28Z

0

You can do it like this:

var delay = 1000, // 1000 ms = 1 sec
    i;
setTimeout(function() {
  document.getElementById('wrapper').innerHTML = arrData[i];
  i++;
}, delay);

answered Aug 26, 2013 at 18:24

Simone

21.6k15 gold badges84 silver badges112 bronze badges

2 Comments

Zach Saucier Over a year ago

Don't you have to iterate through the array as well?

Simone Over a year ago

Yeah right, fixed. Of course this is not meant as a silver bullet answer... it's just an example

Collectives™ on Stack Overflow

showing random value in div element with javascript

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related