javascript - 表单输入文本显示为 "undefined"或 "[object HTMLInputElement]"

Question

我有一个表单，其中包含各个输入框的 ID 名称、标题和描述。但是，当我尝试在 HTML 中显示这些值时，我要么收到“[object HTMLInputElement]”，要么收到“undefined”。

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

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

但是，如果我改为在函数内声明变量(而不是“全局”？)，我会得到 [object HTMLInputElement]，如下所示:

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

myHTML 是打印在 DOM 中的变量。

这是怎么回事？如果我全局声明了名称、标题和描述，我已经尝试将它们传递到函数中。但这并没有解决问题(我仍然得到“[object HTMLInputElement]”)。

Answer 1

“未定义”值是由于“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;
}