Javascript, viewing [object HTMLInputElement]

Question

I'm just started to learn HTML. Doing an alert() on one of my variables gives me this result [object HTMLInputElement].

How to get the data, that were added in text field, where my input type is text?

Answer 1

Say your variable is myNode, you can do myNode.value to retrieve the value of input elements.

Chrome Developer Tools has a Properties tab which shows useful DOM attributes.

Also see MDN for a reference.

Answer 2

If the element is an <input type="text">, you should query the value attribute:

alert(element.value); 

See an example in this jsFiddle.

Also, and seeing you're starting to learn HTML, you might consider using console.log() instead of alert() for debugging purposes. It doesn't interrupt the execution flow of the script, and you can have a general view of all logs in almost every browser with developer tools (except that one, obviously).

And of course, you could consider using a web development tool like Firebug, for instance, which is a powerful addon for Firefox that provides a lot of functionalities (debugging javascript code, DOM inspector, real-time DOM/CSS changes, request monitoring ...)