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

问题描述：

我有一个html和java脚本文件。打印[object HTMLInputElement]而不是文本框

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>

问题是，现在，当涉及到打印描述中，所有它打印是[对象HTMLInputElement]。我想告诉它是否正确存储了信息，以便我可以将它存储在单独的文件中。

使用了'getElemenstByClassName'，而不是'getElementById'为'description'，'due_date'和'reminder_date' – blex

它似乎并不像你曾经打印什么。（没有'console.log'。）另外，你的函数什么都不做;他们将某些东西保存到局部变量并结束。（在函数结束时，局部变量将被丢弃。） – c0d3rman

'getElementsByClassName'返回节点列表，而不是单个元素。在使用'.value'之前，您需要为它编制索引。 – Barmar

答

这条线：

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

没有使用可变description在saved()。它正在访问全局变量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，而不是显示文本框中的内容。 *编辑*：哎呀，忘了改变一些小事，它的作品！万分感谢！ – Fencer300

我已经添加了一个可执行代码片段，它可以工作。 – Barmar

请记住，当您离开输入字段时，发生'change'事件，而不是在输入时。 – Barmar

答

首先，description是不是在你改变#result.二的HTML范围avaliable，你一个错误，你得到的类名这样的元素，但不由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元素的引用时，本身是没有手动或本地定义的，但这种情况只在现代浏览器。

请参阅我的回答以获得最后一个问题的答案。 – Barmar

@Barmar好笔记 – Hydro

答

这个问题是一对夫妻误解的结合。

你的函数功能saved()声明一个本地变量description用关键字var。该变量仅在内部可见函数（因为它是本地的）。所以一旦函数结束，它就会被抛弃。

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

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

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

正如我所解释的，description这里不指description内saved。那么为什么它会变成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规范所要求的。 – Barmar

请参阅http://stackoverflow.com/questions/5515659/javascript-variable-corresponds-to-dom-element-with-the-same-id – Barmar

谢谢！编辑。 – c0d3rman

答

你在你的代码的几个误区：

你在函数名错字“getElemenstByClassName”应为“getElementsByClassName方法”。
您使用className为“getElemenstByClassName”的函数搜索输入＃描述，您应该使用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; 
    }

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

相关推荐