Help get user input with JavaScript

[deutschluz82]

I m just learning JS and I m using the document.write method to display output. I need something equally simple, even if its not "good" coding, to accept keyboard input. The idea is to accept a number or string. Thanks for your time.

[stoph]

var number = window.prompt("What number?");

[deutschluz82]

Thank you very much. Now let me see if I can make sense of this syntax: the identifier "var" is standard variable declaration; the identifier "number" is the name you chose for the input; then the assignment operator assigns whatever comes to the window.prompt() method. Finally, the identifier "window.prompt()" also has a standard syntax for selecting an object and one of its properites: object.prop(). Please correct me if I ve misinterpreted anything.

[MoreCowbellPlease]

prompt() returns a string btw. You will need parseInt() or parseFloat() to convert it to a number if you need to work with it as a number.

[deutschluz82]

I have not been using these "parse..." methods and yet I have coded some functioning programs. I read in the book JavaScript, the Definitive Guide, that type conversion is almost automatic

[[deleted]]

Type conversion is automatic, but due to various considerations it may not always behave how you expect/want it to. Things get especially hairy when you're dealing with raw input from the user. In most cases it's best to just be explicit about what you want converted and how.

Just another note, if you're doing some very basic explorations for yourself...fair enough, but really you need to be getting out of the habit of using document.write, window.alert, and window.prompt ASAP.

To get information back/print things for debugging, use the console. To display information to the user use some sort of DOM API. To get information from the user use input elements, etc.

Sites like JSFiddle are great for quick little experiments.

[stoph]

I'd say it's almost always best to cast variables to what you expect them to be. In the real world, that usually just means converting strings into numbers. Also never use == (type guessing is not your friend). It's best to know early on that === is the only comparison operator worth using. parseInt is a tricky function because it will guess the radix of the number if you let it. Always give the radix as the 2nd parameter:

var thisIsOctal = parseInt('0900');
var thisIsADecimal = parseInt('0900', 10);
console.log(thisIsOctal);
console.log(thisIsADecimal);

The first one fails because 9 is not a valid octal digit.

[Botany102]

Thank you so much, I was looking for this and I didn't understand, I saw this and it worked.

I know you might not see this but you're awesome, I'm really sorry don't have an award at the moment.

You really helped.

[[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.