Fencer300 Fencer300 - 3 months ago 51
HTML Question

Printing [object HTMLInputElement] instead of text box

I have an html and java script files.



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>





Problem is that now when it comes to print the description, all it prints is [object HTMLInputElement]. I want to tell if its storing the information correctly so that i can then have it store it in a separate file.

Answer

This line:

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

is not using the variable description in saved(). It's accessing the global variable window.description. The browser automatically creates global variables for every id in the DOM, and the value is that element.

You need to put that line in the changed() function so it will access the local variable. And you need to use document.getElementById() to find the element.

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>