打印 [object HTMLInputElement] 而不是文本框答案

【问题标题】：Printing [object HTMLInputElement] instead of text box打印 [object HTMLInputElement] 而不是文本框
【发布时间】：2016-12-19 23:14:22
【问题描述】：

我有一个 html 和 java 脚本文件。

function saved() {
    
    var description;
    description = document.getElemenstByClassName("description").value;
}
function savedd() {
    "use strict";
    var due_date;
    due_date = document.getElementsByClassName("due_date").value;
}
function saverd() {
    "use strict";
    var reminder_date = document.getElementsByClassName("reminder_date").value;
}
document.getElementsByClassName("result")[0].innerHTML = description;

<!DOCTYPE html>
<html>
<head>  
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=.5, maximum-scale=1, minimum-scale=1, width=device-width" />
    </head>
    <body>
    <div style="margin:0 auto;text-align:center">

      <!-- Div align in the middle -->
      <div style="margin-left:auto;margin-right:auto;text-align:center">
          <form>
           Description:<br>
           <input type="text" id="description" onchange="saved()"><br>
              <br>
              <br>
            Due Date:<br>
           <input type="date" id="due_date" onchange="savedd()" ><br>
              <br>  
              <br>
            Reminder Date: <br>
           <input type="date" id="reminder_date" onchange="saverd()"><br>
          </form>
      </div>
        <div class="result"> PlaceHolder</div>
</div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script type='text/javascript' src="editpage.js"></script>
    </body>
</html>

问题是现在打印描述时，它打印的只是[object HTMLInputElement]。我想知道它是否正确存储了信息，以便我可以让它存储在一个单独的文件中。

【问题讨论】：

对于description、due_date 和reminder_date，您使用的是getElemenstByClassName 而不是getElementById
您似乎从未打印过任何东西。（没有console.log。）另外，你的函数什么也不做；他们将某些内容保存到局部变量并结束。（在函数结束时，局部变量将被丢弃。）
getElementsByClassName 返回节点列表，而不是单个元素。您需要先对其进行索引，然后才能使用.value。

标签： javascript html

【解决方案1】：

这一行：

document.getElementsByClassName("result")[0].innerHTML = description;

没有在saved() 中使用变量description。它正在访问全局变量window.description。浏览器会自动为 DOM 中的每个 id 创建全局变量，值就是那个元素。

您需要将该行放在changed() 函数中，以便它可以访问局部变量。并且你需要使用document.getElementById() 来查找元素。

function saved() {
  var description;
  description = document.getElementById("description").value;
  document.getElementsByClassName("result")[0].innerHTML = description;
}

<div style="margin:0 auto;text-align:center">

  <!-- Div align in the middle -->
  <div style="margin-left:auto;margin-right:auto;text-align:center">
    <form>
      Description:
      <br>
      <input type="text" id="description" onchange="saved()">
      <br>
      <br>
      <br>Due Date:
      <br>
      <input type="date" id="due_date" onchange="savedd()">
      <br>
      <br>
      <br>Reminder Date:
      <br>
      <input type="date" id="reminder_date" onchange="saverd()">
      <br>
    </form>
  </div>
  <div class="result">PlaceHolder</div>
</div>

【讨论】：

感谢您的帮助！这确实解决了对象 HTML 问题，但现在它卡在 PlaceHolder 上，不显示文本框中的内容。编辑：哎呀，忘了更改一些小东西，它可以工作！非常感谢！
请记住，change 事件发生在您离开输入字段时，而不是在您键入时。
在描述中输入xxx，然后按TAB。
@Fencer300 请注意，如果您希望这种情况实时发生（而不是在输入失去焦点时），您可以使用oninput 事件而不是onchange。（但它在 IE8 和更早的版本中不起作用）

【解决方案2】：

首先，description 在您更改 #result. 的 HTML 的范围内不可用其次，您错了，您是通过类名而不是 id 获取此类元素。

var description;

function saved() {
    description = document.getElemenstById("description").value;
}

function savedd() {
    "use strict";
    var due_date;
    due_date = document.getElementById("due_date").value;
}
function saverd() {
    "use strict";
    var reminder_date = document.getElementById("reminder_date").value;
}

document.getElementsByClassName("result")[0].innerHTML = description;

您将得到"[object HTMLInputElement]" 作为结果，因为全局window.description 在其本身未手动或本机定义时转换了#description 元素的引用，但这仅在现代浏览器中发生。

【讨论】：

上一个问题的答案见我的回答。

【解决方案3】：

这个问题是几个误解的结合。

您的函数函数saved() 使用关键字var 声明了一个本地变量description。这个变量只在函数内部可见（因为它是本地的）。因此，一旦函数结束，它就会被丢弃。

接下来，正如 blex 所指出的，您使用函数 getElemenstByClassName（拼写错误）而不是 getElementById。您必须使用后者，因为您是通过 ID 查找元素。

最后问题仍然存在，为什么[object HTMLInputElement] 放入#result？您运行以下行：

document.getElementsByClassName("result")[0].innerHTML = description;

正如我所解释的，这里的description 并不是指saved 中的description。那么为什么它会变成HTMLInputElement？根据HTML standard (chapter 6.2.4)，如果您从未定义名为something 的变量但尝试使用它，浏览器将尝试查找ID 为something 的元素。所以上面的行真的被执行为

document.getElementsByClassName("result")[0].innerHTML = document.getElementById("description");

因为document.getElementById("description") 返回一个HTMLInputElement，这就是你所看到的。

那么你如何解决这个问题？有几种方法，但与您所做的最相似的是确保您的变量不会在函数结束时被丢弃。这看起来像：

var description;
function saved() {
    description = document.getElementById("description").value;
}
document.getElementById("result").innerHTML = description;

对您的其他功能进行类似的更改。这不是最简单或最标准的方法，但我相信我的其他用户会参与其中。

最后要知道，在你的 JS 文件末尾调用一次document.getElementById("result").innerHTML = description; 意味着这一行只运行一次；也就是说，当页面加载时，它会将结果的内容设置为空变量描述，然后它就永远不会再改变了。也许这也应该是某个元素的onchange 中的一个函数。

【讨论】：

不仅仅是“在许多浏览器中”。它是 HTML 规范所要求的。
见stackoverflow.com/questions/5515659/…

【解决方案4】：

您的代码中几乎没有错误：

函数名称“getElemenstByClassName”应为“getElementsByClassName”。
您使用通过类名“getElemenstByClassName”查找元素的函数搜索 input#description，您应该改用 getElementById 或 querySelector。在此处阅读更多信息http://javascript.info/tutorial/searching-elements-dom。
您的“描述”变量是函数 saved() 的本地变量。您不能在函数外部访问此变量。在此处阅读更多信息http://www.w3schools.com/js/js_scope.asp。

这是工作示例https://jsfiddle.net/9dzqr3pm/

    function saved() {
       var description = document.querySelector("#description").value;
       document.querySelector(".result").innerHTML = description;
    }

【讨论】：