0

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.

Fencer300
  • 3
  • 1
  • 6
  • 3
    You're using `getElemenstByClassName` instead of `getElementById` for `description`, `due_date` and `reminder_date` – blex Aug 12 '16 at 21:08
  • It doesn't seem like you ever print anything. (There's no `console.log`.) Also, your functions do nothing; they save something to a local variable and end. (At the end of the function the local variable will be thrown away.) – c0d3rman Aug 12 '16 at 21:09
  • `getElementsByClassName` returns a list of nodes, not a single element. You need to index it before you can use `.value`. – Barmar Aug 12 '16 at 21:16

4 Answers4

2

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>
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Appreciate the help! That did fix the object HTML problem, but now it's stuck at PlaceHolder, not displaying what is in the text box. *EDIT*: Oops, forgot to change something minor, and it works! Thanks a ton! – Fencer300 Aug 12 '16 at 21:37
  • Remember that the `change` event happens when you leave the input field, not while you're typing. – Barmar Aug 12 '16 at 21:41
  • Type `xxx` in the Description and then TAB. – Barmar Aug 12 '16 at 21:41
  • @Fencer300 Note that if you want that to happen in real time (not when the input loses focus), you can use the `oninput` event instead of `onchange`. (but it won't work in IE8 and ealier) – blex Aug 12 '16 at 21:41
0

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.

0

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.

c0d3rman
  • 665
  • 6
  • 15
0

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;
    }
gauss
  • 177
  • 12