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

标签 javascript html

我有一个 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]。我想知道它是否正确存储信息,以便我可以将其存储在单独的文件中。

最佳答案

这一行:

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>

关于javascript - 打印 [object HTMLInputElement] 而不是文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38926442/

相关文章:

javascript - 强制 Accordion 关闭所有选项卡

javascript - 在输入显示 div 一段时间后

javascript - Bootstrap 固定在顶部但低于顶部的警报

javascript - 在jquery插件中添加事件

javascript - 包含数据的 jQuery 空文本区域

javascript - IE 7 中出现奇怪的 javascript 错误,但 IE 8 中没有

javascript - CodeMirror 不适用于 React/Webpack

javascript - 选中其他复选框时取消选中复选框

javascript - 在上一个函数完成后发出调用函数

html - 使用 HTML 和 CSS 将 .MP4 视频作为背景