Javascript setinterval's time not working

Question

The following code in:

<script type="text/javascript">

function a() {
    document.write("bob ");
}

setInterval("a()", 1000);

</script>

is to supposed to have an out put of 1 bob, printed on the browser, every second.

I am using firefox, and it only prints onces, and nothing.... anyone has any ideas why? mauybe I'm missing something? ec = now.getSeconds(); document.write(hours+':'+mins+':'+sec+"
"); }

UPDATE EDIT:

I have the same problem with this code:

<script type="text/javascript">
function printtime () {
    var now = new Date();
    var hours = now.getHours();
    var mins = now.getMinutes();
    var sec = now.getSeconds();
    document.write(hours+':'+mins+':'+sec+"<br />");
}

setInterval("printtime()", 1000);
</script>

It's supposed to print the time on the browser under the previous one, once per second.... but it wont print further than the first..

Remove the quotes from the function call in setInterval, just do setInterval(a, 1000); — leofontes, Nov 22 '16 at 19:13
@leofontes I don't think that removing the quotes on *"a()"* will lead any better. — Mario Santini, Nov 22 '16 at 19:16
[Works fine for me.](http://codepen.io/anon/pen/xRdOeB) Although I would [caution against `document.write`](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) and suggest just doing `setInterval(a, 1000)` instead of relying on the `eval` properties of `setInterval`. — Mike Cluck, Nov 22 '16 at 19:16
@leofontes: While that's a good idea, it won't solve this problem. — T.J. Crowder, Nov 22 '16 at 19:17
@T.J.Crowder You should undelete your answer, it was fine after the edit. I didn't even consider your wiping out the timer point when thinking about it originally; it does makes sense, now that I think about it. The only reason I know about `document.write()` is because I used to use it a lot. — Feathercrown, Nov 22 '16 at 19:21
@T.J.Crowder Yeah, I guess we all lost track of the original question XD — Feathercrown, Nov 22 '16 at 19:24

T.J. Crowder · Accepted Answer · 2016-11-22T19:27:10.330

5

Using document.write after the main HTML parsing is complete wipes out the page entirely and replaces it with what you output. On Firefox, that wipes out your timer, so it stops after firing just once and wiping the page. (This is not true of Chrome, which keeps the a function around, so your original code works on Chrome, but not Firefox.)

If you just output, say, new elements to the page, what you have works:

function a() {
  var p = document.createElement("p");
  p.appendChild(
    document.createTextNode("bob")
  );
  document.body.appendChild(p);
}

setInterval("a()", 1000);

but, it's best not to use strings with setInterval or setTimeout; just refer to the function instead:

setInterval(a, 1000);

function a() {
  var p = document.createElement("p");
  p.appendChild(
    document.createTextNode("bob")
  );
  document.body.appendChild(p);
}

setInterval(a, 1000);

Or if you want to just add text to the end of an existing element repeatedly:

function a() {
  var p = document.getElementById("target");
  p.appendChild(
    document.createTextNode("bob ")
  );
}

setInterval(a, 1000);

<p id="target"></p>

edited Nov 22 '16 at 19:27

answered Nov 22 '16 at 19:13

T.J. Crowder

879,024
165
1,615
1,639

1

That's not the problem, but it is worth noting. – Feathercrown Nov 22 '16 at 19:14
1

`document.write()` doesn't replace output from other `document.write()`s unless you use `document.close()`. – Feathercrown Nov 22 '16 at 19:17
@T.J.Crowder [Because their code works fine](http://codepen.io/anon/pen/xRdOeB) in it's current state unless, as Feathercrown pointed out, the document is closed. – Mike Cluck Nov 22 '16 at 19:18
P.S. After your edit, this answer does address the problem, and is rather superb. – Feathercrown Nov 22 '16 at 19:18
@Feathercrown: My point was that the first time it ran, it would wipe out the page and thus kill the timer. It turns out that's not true on Chrome, but it is on Firefox. – T.J. Crowder Nov 22 '16 at 19:27
@MikeC: See reply to feathercrown above. Holy browser compatibility, Batman! :-) – T.J. Crowder Nov 22 '16 at 19:30
@T.J.Crowder Crazy! Well, that's good to know. All the more reason to avoid `document.write` ;) – Mike Cluck Nov 22 '16 at 19:31
@T.J.Crowder Thanks for your answer. will you please explain how you would recreate the time stamp in the second part of my question for firefox? – Nov 22 '16 at 19:37

score 2 · Answer 2 · answered Nov 22 '16 at 19:13

2

function a() {
    console.log("bob ");
}

setInterval(a, 1000);

*{ background-color: yellow; }

answered Nov 22 '16 at 19:13

Mahi

1,659
8
19

While that's always a good idea, it doesn't fit the symptom described in the question. If it were a scope issue, `a` wouldn't run even once. – T.J. Crowder Nov 22 '16 at 19:20

score 1 · Answer 3 · answered Nov 22 '16 at 19:16

1

Here you go; don't add quotes or parenthesis after your function in setInterval();.

<script type="text/javascript">

function a() {
    document.write("bob ");
}

setInterval(a, 1000);

</script>

Also worth noting is document.write(); will delete a loaded webpage, including yours.

answered Nov 22 '16 at 19:16

Feathercrown

1,886
1
13
23

Tremendously wrong, this is. Because appending the new values will not be visible to the users. I think, I am missing something. Nevermind. Let me comeback – Rajaprabhu Aravindasamy Nov 22 '16 at 19:16
@RajaprabhuAravindasamy Did you run the snippet? This code works fine (at least in Chrome, I haven't tested any others.) – Mike Cluck Nov 22 '16 at 19:20
Yup My bad. I thought `document.write` will replace everything. I am wrong. Let me read that doc fully. – Rajaprabhu Aravindasamy Nov 22 '16 at 19:21
@RajaprabhuAravindasamy: It does the *first* time you use it after the parsing is complete, but not after that (unless you use `document.close`). But this doesn't address the symptom described by the OP, that it works *once*. If the problem were scope (e.g., the `"a()"` requiring `a` to be a global), `a` wouldn't run even once. The OP's code works: https://jsfiddle.net/zgmLv610/ – T.J. Crowder Nov 22 '16 at 19:22
To clarify for everyone: `document.write()` only replaces previous uses if you close the document in between with `document.close()`. – Feathercrown Nov 22 '16 at 19:23
@T.J.Crowder Its good to know about `document.close`. And I am agree with your second point, replacing `"a()"` with `a` is not gonna address anything here, as OP tells he could see `a` running once. String expressions to setInterval would be evaluated under the hood in window's context. So that is not the problem. Sounds mysterious. – Rajaprabhu Aravindasamy Nov 22 '16 at 19:27
2

@RajaprabhuAravindasamy: Mystery solved: On Firefox, the timer gets wiped out when `document.write` wipes out the document and opens a new one. On Chrome, it doesn't. – T.J. Crowder Nov 22 '16 at 19:30

Javascript setinterval's time not working

3 Answers3