Question

I am just learning JavaScript at the moment and I have been able to write an event handler for when a user clicks on the document that will output the mouse clicks coordinates.

However the problem I am having is that it will only do it once. I thought that if the event handler is waiting for a “click” and if it got one it would evoke the function getCords.

var x = document;
x.addEventListener("click", getCords, false);

function getCords(event){
    x.writeln(event.clientX, ",", event.clientY)
}

Answer 1

On MDN:

document.writeln is the same as document.write but adds a newline.

So, let’s look at document.write:

Writing to a document that has already loaded without calling
document.open() will automatically perform a document.open call. Once
you have finished writing, it is recommended to call document.close(),
to tell the browser to finish loading the page. The text you write is
parsed into the document’s structure model. In the example above, the
h1 element becomes a node in the document.

What does this mean?

It means that your code really looks like this:

var x = document;
x.addEventListener("click", getCords, false);

function getCords(event){
    x.open(); // <-------- new
    x.writeln(event.clientX, ",", event.clientY)
}

The first fix to make (which will also stop the page appearing as “loading” forever) is to add the document.close() call as advised:

var x = document;
x.addEventListener("click", getCords, false);

function getCords(event){
    x.open(); // <-------- new
    x.writeln(event.clientX, ",", event.clientY)
    x.close(); // <-------- new
}

Now it’s clearer what’s going on — we’re creating a new document stream here. Your existing document contents are overwritten; the event handler ceases to exist.

In fact, the DOM standard says this explicitly about open:

Open a document stream for writing. If a document exists in the target, this method clears it.

And your new document doesn’t contain your script, so even re-assigning the event handler inside the callback won’t work.

Best not to use document.write (and document.writeln) at all; assign the text to be the contents of some div or span node instead.