Constantly random value showing in homepage

Question

I am a js beginner. I want to show some random float value between 1 to 50, just the demo value of sensor data. That's the code I have tried:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

<script>
function myFunction() {
  while(1)
  {
   document.getElementById("demo").innerHTML = Math.random()*50 + 1 ;
  }
}
</script>

</body>
</html>

But it didn't work. Can anyone help? I want to show the number when the page loaded and constantly changing the value like dynamic data.

You need to use a timer, via either `setTimeout()` or `setInterval()`. The browser will not render the view while your loop is running. — Pointy, Jun 02 '21 at 13:47
You'll need to remove the `while` call, and call the function you have there in a `setInterval` call. Finally, you probably want to round the random value, otherwise you'll get a float between 1 and 51. — M0nst3R, Jun 02 '21 at 13:50

score 1 · Accepted Answer · answered Jun 02 '21 at 13:49

1

there are 2 problems:

you defined function, but it is not called anywhere
while (1) will not work as you expected,

here is fixed version:

function myFunction() {
   document.getElementById("demo").innerHTML = Math.random()*50 + 1 ;
}
setInterval('myFunction()', 1000);

<!DOCTYPE html>
<html>
<body>
<p id="demo">demo</p>
</body>
</html>

answered Jun 02 '21 at 13:49

Iłya Bursov

23,342
4
33
57

Why the setInterval? I don't see any reason why to use setInterval – caramba Jun 02 '21 at 13:50
@caramba it is part of the question `hen the page loaded, constantly changing the value like dynamic data` – Iłya Bursov Jun 02 '21 at 13:52
Thanks a lot. That's what I exactly wanted to do! And a learnt a new concept, interval! thank you :D – Dip Chakraborty Jun 02 '21 at 16:29

ulou · Answer 2 · 2021-06-02T22:35:16.287

while(1) {...} won't re-render your document (here's why). If you want to do some kinda of clock/timer you may use setInterval or setTimeout. However here is one important thing about this, you need to remember about clearInterval/clearTimeout, otherwise weird, unexpected things may happen (interval thread might be kept till you close your browser tab or browser).

Here is example code how your problem can be solved:

function updateRandomValue() {
 document.getElementById("demo").innerHTML = Math.random()*50 + 1
}

const timerId = setInterval(updateRandomValue, 1000)

document.addEventListener("onbeforeunload", () => clearInterval(timerId))

<p id="demo">-</p>

There is no need to `round` as the OP wants " some random float value between 1 to 50" — Chin. Udara, Jun 02 '21 at 14:09

Chin. Udara · Answer 3 · 2021-06-02T14:11:34.413

Your program is caught in an infinite loop in while(1). The browser never gives the control back so that the page can be updated. What you can do is have your loop within a timeout. Like this;

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random()*50 + 1 ;
}
setInterval(myFunction, 1); // the timeout is in milliseconds. This is almost similar to running in a while loop because "myFunction" will be executed in every millisecond.

<p id="demo"></p>

score 0 · Answer 4 · answered Jun 02 '21 at 14:22

while (1) won't update your page; it'll just break. You're also never calling the function. Here's your updated script.

function updateFunc() {
  document.getElementById("demo").innerHTML = Math.random()*50 + 1 ;
}
window.setInterval(updateFunc, 1000);

Some important notes. I renamed the function so the code is clearer. 1000 means it will run every second. If you want it faster or slower, change the value. It's in milliseconds.

Constantly random value showing in homepage

4 Answers4