Understanding this event handler in Javascript

Question

I expect the code below to increment the variable counter each time the event is fired i.e., when the down key is pressed, however it does not. The code increments only once and then nothing happens even if I press the down key.

Can you explain why is it happening?

Also the Firefox's tab keeps showing the loading circle when the event fires, why is that? Moreover is there a lifetime for the event listener i.e., does it expire when the </script> is reached?

<html>
<head>
<body>

<script>
var counter=0;
addEventListener("keydown",function(){
counter++;
document.write(counter);
});
</script>
</body>
</html>

Possible duplicate of [How can I create JS event listeners that survive a document.write?](http://stackoverflow.com/questions/8672833/how-can-i-create-js-event-listeners-that-survive-a-document-write) — Alexander O'Mara, Sep 14 '16 at 00:16

score 1 · Accepted Answer · answered Sep 14 '16 at 00:17

1

document.write() actually overwrites all the current contents of the page so your code will run only once and your HTML code afterwards will contain only one character "1". That means your DOM will be destroyed and there will be no more JavaScript code to run.

What you probably want to do is update the contents of a specific element instead of overwriting all your document.

answered Sep 14 '16 at 00:17

Lukas Steiblys

76
4

What about the loading symbol in the tab why does it keep running? any ideas on that? – OAH Sep 14 '16 at 00:21
1

Not sure, it seems to be Firefox specific. My wild guess is that the function never returns since it is destroyed and the event handler hangs. – Lukas Steiblys Sep 14 '16 at 00:23
1

It keeps showing the loading icon until the document is closed via `document.close();`. – Sebastian Simon Sep 14 '16 at 00:36

score 1 · Answer 2 · answered Sep 14 '16 at 00:32

Lukas described the problem correctly, the following modified version of your example includes a <div> to be written to and changes to the event listener to write to the tag instead of the overwriting the DOM.

<html>
<head>
<body>
<script>
  var counter=0;
  addEventListener("keydown",function(){
    counter++;
    document.getElementById("target").innerHTML = counter;
  });
</script>
<div id="target"></div>
</body>
</html>

Understanding this event handler in Javascript

2 Answers2