CODEWITHSUNDEEP
javascripthtml
Fencer300
Fencer300

Reputation: 13

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.

Upvotes: 0

Views: 4455

Answers (4)

Barmar
Barmar

Reputation: 782166

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>

Upvotes: 2

gauss
gauss

Reputation: 177

You have few errors in your code:

  1. You have typo in function name "getElemenstByClassName" should be "getElementsByClassName".
  2. You search for input#description with function that is looking for element by className "getElemenstByClassName", you should use getElementById or querySelector instead. Read more here http://javascript.info/tutorial/searching-elements-dom.
  3. Your "description" variable is local to the function saved(). You cannot access this variable outside the function. Read more here http://www.w3schools.com/js/js_scope.asp.

Here is working example https://jsfiddle.net/9dzqr3pm/ 

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

Upvotes: 0

c0d3rman
c0d3rman

Reputation: 667

This issue is a combination of a couple misunderstandings.

Your function function saved() declares a local variable description with the keyword var. This variable is only visible inside the function (because it's local). So as soon as the function ends it is thrown away.

Next, as pointed out by blex, you use the function getElemenstByClassName (which is misspelled) instead of getElementById. You must use the latter, since you are looking for an element by its ID.

Finally the question remains, why is [object HTMLInputElement] put in #result? You run the following line:

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

As I explained, description here does not refer to the description inside saved. So why does it become an HTMLInputElement? As per the HTML standard (chapter 6.2.4), if you never define a variable named something but try to use it, the browser will try and look for an element with the ID something. So the line above is really being executed as 

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

and since document.getElementById("description") returns an HTMLInputElement, that's what you see.

So how do you fix this? There are a couple ways, but the most similar to what you did is to make sure that your variables don't get thrown away at the end of the function. This would look something like:

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

With analogous changes to your other function. This is not the easiest or most standard way to do this, but I'm sure my fellow users will chip in with those.

Finally be aware that calling document.getElementById("result").innerHTML = description; once at the end of your JS file will mean that this line is only run once; that is, when the page loads it will set the contents of result to the empty variable description, and then it will never change again. Perhaps this too should be a function that goes in some element's onchange.

Upvotes: 0

user5066707
user5066707

Reputation:

First, description isn't avaliable in the scope where you change the HTML of #result. Second, you've a mistake, you're getting such elements by class name, but not by 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;

And you're getting "[object HTMLInputElement]" as result because global window.description turns a reference of the #description element when itself isn't manually or natively defined, but this happens in modern browsers only.

Upvotes: 0

Related Questions