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? — Alexander O'Mara
– Alexander O'Mara, Commented Sep 14, 2016 at 0:16

Lukas Steiblys · Accepted Answer · 2016-09-14 00:17:07Z

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, 2016 at 0:17

Lukas Steiblys

764 bronze badges

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

3 Comments

OAH Over a year ago

What about the loading symbol in the tab why does it keep running? any ideas on that?

Lukas Steiblys Over a year ago

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.

Sebastian Simon Over a year ago

It keeps showing the loading icon until the document is closed via document.close();.

Joe Skora · Accepted Answer · 2016-09-14 00:32:07Z

1

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>

answered Sep 14, 2016 at 0:32

Joe Skora

14.9k5 gold badges39 silver badges39 bronze badges

Collectives™ on Stack Overflow

Understanding this event handler in Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related