表单输入文本显示为“undefined”或“[object HTMLInputElement]”

时间:2013-03-22 23:40:16

标签: javascript forms

我有一个表格,其中包含相应输入框的ID名称,标题和说明。 但是,当我尝试在HTML中显示这些值时,我会收到“[object HTMLInputElement]”或“undefined”。

对于下面的代码块我得到“未定义”,其中我已在函数外声明变量名称,标题和描述全局以检索输入值。

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>';

但是,如果我在函数内部声明变量(而不是“global”?),我会得到 [object HTMLInputElement] ,如下所示:

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

myHTML是在DOM中打印的变量。

这里发生了什么?我已经尝试将名称,标题和描述传递给函数,如果我将它们全局声明的话。但这并没有解决问题(我仍然有“[object HTMLInputElement]”)。

1 个答案:

答案 0 :(得分:3)

“未定义”值是由于“onchange”事件在输入发生更改之前未触发。这个jsfiddle说明了我的观点:http://jsfiddle.net/gR8td/。请注意,在输入输入元素的值之后,将显示全局变量的新值。我添加了以下函数来输出值:

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