表单输入文本显示为"undefined"或"[objecthtmlinpuelement]

form input text showing up as either "undefined" or "[object HTMLInputElement]"

本文关键字:quot objecthtmlinpuelement undefined 输入 文本 表单 显示      更新时间:2023-09-26

我有一个带有id名称、标题和各自输入框描述的表单。然而,当我试图在HTML中显示这些值时,我要么收到"[objecthtmlinputelement]"或"undefined"。

我得到"undefined"对于下面的代码块,我在函数之外全局声明了变量name, title和description 来检索输入值。

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中打印的变量。

这是怎么回事?我已经尝试将名称、标题和描述传递到函数中,如果我对它们进行全局声明的话。但这并没有解决问题(我仍然得到"[objecthtmlputelement]")。

"undefined"的值是由于"onchange"事件没有触发,直到输入发生变化。这个例子说明了我的观点: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;
}