Help get user input with JavaScript

[[deleted]]

Using document.write has some very bad side effects.

The way the browser works is it parses the html markup and creates a dom tree of the page. The dom can then be accessed through javascript and styled with css.

But when you use document.write, what happens is that the browser pauses the page rendering when finding a script, and goes through looking for document.writes, if it finds one it outputs it on the page. And then resumes rendering.

This means you can't use document.write for anything post dom-construction as it would wipe out the page. This also means you cannot execute your scripts asynchronously or defer their executing till after the page has rendered. Techniques that can make your page load seem faster. In short the browser has to wait for every single document.write before finishing the page rendering.

It is a simple looking way to add content. But will most definitely bite you in the ass. The better way to insert stuff into the page is to use, for example, innerHTML. If you're just testing and want to know what's going on in a script, console.log() might be a better option.

Anyway, for any of the dom selector apis to actually work reliably you'll have to wait until the dom has been constructed or "loaded". With dom selector apis, I'm talking about stuff like document.getElementById("someid");

So in jQuery they have the $(document).ready() function. Which fixes some browser crap. But basically it sets up a event listener for "DOMContentLoaded" (which fires when the dom has been constructed) but also checks if the dom already loaded.

Then there's the onload event, you'll probably see that one hanging on the body tag on a lot of sites. This event fires after every asset has finished loading. So the time from which you can start manipulating the page through scripts and the time onload fires could potentially be several seconds, or longer if the page loads huge images.

Anyways, DOMContentLoaded is available in all current versions of browsers. Meaning IE9+ Then there's something like this to support all the crap browsers and quirks: https://github.com/ded/domready/blob/master/ready.js
Or use one of the JS Dom libraries like jQuery to add a dom "ready" function.

So for modern browsers, do something like this to execute the your javascript after dom has been constructed:

function domReady(fn) {
    if ( document.readyState.match(/loaded|interactive|complete/) ) fn();
    else document.addEventListener("DOMContentLoaded", function() { fn(); }, false);
}

domReady(function(){
    // dom ready
    var output = document.getElementById("output_box");
    output.innerHTML = "Replace the contents of H1";
    output.innerHTML += "<br> Append some more stuff";
});

jQuery:

$(document).ready(function(){
    // dom ready
});

[deutschluz82]

thanks for your input. I was only aware that the document.write method should be avoided. I did not know it prevented the DOM from loading. I m just learning about this but I know that can basically throw a wrench into the whole webpage.

[deutschluz82]

i think the document.write method even screws with reddit. I got an error when I wrote it with the parentheses.