I have a form with the id's name, title, and description for respective input boxes. However when I try to display those values in HTML I either receive "[object HTMLInputElement]" or "undefined".

I get "undefined" for the below block of code where I have declared the variables name, title and description globally outside the functions to retrieve input values.

var name;
var title;
var description;      
document.getElementById("name").onchange = function(){
      name = document.getElementById("name").value;
      };
document.getElementById("title").onchange = function(){
          title = document.getElementById("title").value;
      };
document.getElementById("description").onchange = functio){
          description = document.getElementById("description").value;
      };

var myhtml = '<p>' + name + '</p><p>' + title + '</p><p>' + description + '</p><p>';

However, I get [object HTMLInputElement] if I instead declare the variables inside the functions (instead of "globally"?), like so:

document.getElementById("name").onchange = function(){
      var name = document.getElementById("name").value;
      };

myHTML is the variable which is printed in the DOM.

What's going on here? I've tried passing name, title, and description into the functions if I have them globally declared. But that did not solve the problem (I still got "[object HTMLInputElement]").

I have a form with the id's name, title, and description for respective input boxes. However when I try to display those values in HTML I either receive "[object HTMLInputElement]" or "undefined".

I get "undefined" for the below block of code where I have declared the variables name, title and description globally outside the functions to retrieve input values.

var name;
var title;
var description;      
document.getElementById("name").onchange = function(){
      name = document.getElementById("name").value;
      };
document.getElementById("title").onchange = function(){
          title = document.getElementById("title").value;
      };
document.getElementById("description").onchange = functio){
          description = document.getElementById("description").value;
      };

var myhtml = '<p>' + name + '</p><p>' + title + '</p><p>' + description + '</p><p>';

However, I get [object HTMLInputElement] if I instead declare the variables inside the functions (instead of "globally"?), like so:

document.getElementById("name").onchange = function(){
      var name = document.getElementById("name").value;
      };

myHTML is the variable which is printed in the DOM.

What's going on here? I've tried passing name, title, and description into the functions if I have them globally declared. But that did not solve the problem (I still got "[object HTMLInputElement]").

• javascript
• forms

Share Improve this question Follow asked Mar 22, 2013 at 23:40 LazerSharksLazerSharks 3,16566 gold badges4545 silver badges6868 bronze badges 4

• undefined, because the variables are not defined at run-time (you're setting the values inside event listeners, which have obviously not been triggered when myhtml was declared). [object HTMLInputElement], because elements with ID attributes can be accessed as window["id_of_element"], provided that there's no global variable called id_of_element. – Rob W Commented Mar 22, 2013 at 23:43
• 1 How is myhtml "printed" in the DOM? You have defined onchange events, so the values will not be shown except with the handlers. – ron tornambe Commented Mar 22, 2013 at 23:59
• Thanks for the ment guys. Right now I'm tinkering with function depositions, scope, and run-times as @RobW 's ment has hinted to me. That chunk of code above was part of a doubly nested "click" function, which were inside two dom/window init functions. So things may have gotten messy. – LazerSharks Commented Mar 23, 2013 at 0:10
• Also, I am now getting [Object object] for one of the values after moving the block around. – LazerSharks Commented Mar 23, 2013 at 0:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The "undefined" values are due to the "onchange" events not having fired until the inputs have changed. This jsfiddle illustrates my point: http://jsfiddle/gR8td/ . Note that after typing values for the input elements, the new values of global variables are shown. I added the following function to output the values:

function showInputs() {
    var myhtml = '<p>' + name + '</p><p>' + title + '</p><p>' + description + '</p>';
    var elem=document.getElementById('output');
    elem.innerHTML = myhtml;
}