Question

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

＆＃13;

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;

＆＃13;

<!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>

＆＃13;

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

Answer 1

这一行：

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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元素的引用，但这种情况会发生仅限现代浏览器。

Answer 3

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

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

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

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

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

正如我解释的那样，description这里并未引用description内的saved。那为什么它变成HTMLInputElement？根据{{3}}，如果您从未定义名为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中的函数。

Answer 4

您的代码中的错误很少：

您在函数名称中输入错误“getElemenstByClassName”应为“getElementsByClassName”。
使用按类名“getElemenstByClassName”查找元素的函数搜索输入#description，您应该使用getElementById或querySelector。在此处阅读更多http://javascript.info/tutorial/searching-elements-dom。
您的“description”变量是函数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;
    }

打印[对象HTMLInputElement]而不是文本框

4 个答案: