getElementById not working - not returning anything at all

Question

What the code is supposed to do:

Get user input (amount of car loan)
Have user click on button
Spit out monthly car pmt

Here is the code:

<script type="text/javascript"> 
  var myObject = {
      myFunction: function(){
          return document.getElementById("carDebt");     
      },
      h: function(){
          var carLoan=myFunction();
          var RATE12 = 0.005;
          var TIMERATE = 0.25862780376;
          return Math.round((carLoan * RATE12) / TIMERATE);     
      }
      writeIt: function(){
          var g = myObject.h();
          var xyz = g;
          var abc = 2;
          var efg = 3;
          var somearray = [xyz,abc,efg];
          var z = 0;
          for (i=0; i<somearray.length; i++) {
              z += somearray[i]; 
          }; 
          document.getElementById("result").innerHTML=z;        
      }
  };
</script>
<body>
  <form>
    Amt Due on Car Loan: <input type="number" id="carDebt">
  </form>
  <form>
    <input type="button" onclick="myObject.writeIt()" value="Click here when done"      id="button1">
  </form>
  <p id="result">Results Here</p>
</body>

I am not getting anything, as in, not even NaN or undefined. I am probably missing something obvious but I have tried a thousand different ways!

I am not sure why all the code is squished together. I have copied and pasted multiple times and it keeps putting everything on the same lines. — HST, Nov 19 '13 at 00:15
You could also do with some decent variable names. Reading this code hurts... — Kenneth, Nov 19 '13 at 00:18

score 0 · Accepted Answer · answered Nov 19 '13 at 00:17

This line might be the culprit:

var carLoan=myFunction();

Try referencing the object it's under instead:

var carLoan = myObject.myFunction();

Furthermore, that function is returning the DOM element rather than the value of the DOM element. You'll probably want to edit the function to return the value:

myFunction: function(){
   return document.getElementById("carDebt").value;
}

score 0 · Answer 2 · answered Nov 19 '13 at 00:19

0

I also noticed that you have what appears to be too many tags. Do you mean to have two "forms"?

answered Nov 19 '13 at 00:19

morantis

106
8

This wouldn't cause an issue given his code, even though it doesn't appear to be needed. – Matt Huggins Nov 19 '13 at 00:20
That is true, I just wanted to bring it up because I am pretty sure that it will cause an issue with using the button once this issue is cleared up. – morantis Nov 19 '13 at 00:23
I'm still learning, so I thought I needed two forms. But thanks for bringing it up. – HST Nov 19 '13 at 00:25
1

In your case it will work fine, because the button is calling a function that then uses the other "form" for data. In other form situations, such as sending data to another page, those will act as separate forms and no data will follow the button click to the next page, if that makes any sense. – morantis Nov 19 '13 at 00:34

score 0 · Answer 3 · answered Nov 19 '13 at 00:59

Seems the answers are in already putting together the above, ie fix typo, get value not element, have a "result" element to output to. I also added "this" to the myFunction call. My version:

<script type="text/javascript">
 var myObject = 
{ 
    myFunction: function()
        { 
            return document.getElementById("carDebt").value;            
        }, 
    h: function()
        { 
            var carLoan = this.myFunction(); 
            var RATE12 = 0.005; 
            var TIMERATE = 0.25862780376; 
            return Math.round((carLoan * RATE12) / TIMERATE); 
        },
    writeIt: function()
        { 
            var g = myObject.h(); 
            var xyz = g; 
            var abc = 2; 
            var efg = 3; 
            var somearray = [xyz,abc,efg]; 
            var z = 0; 
            for(i=0; i<somearray.length; i++)
            { 
                z += somearray[i]; 
            }; 
            document.getElementById("result").innerHTML=z; 
        } 
}; 
</script> 
</head>
<body> 
<form> Amt Due on Car Loan: <input type="number" id="carDebt"> </form> 
<form> <input type="button" onclick="myObject.writeIt()" value="Click here when done" id="button1"> </form>
<div><p id="result"></p></div>

</body>

Thanks for the suggestion. I would upvote these suggestions but I don't have enough reputation points yet. Sorry. — HST, Nov 19 '13 at 19:25
Question: I don't really understand "this" very well. What is the value of "this" - not having to type out "myObject"?? Also, I can do: var carLoan=this.myFunction(), BUT NOT — HST, Nov 19 '13 at 19:41
Answer: Not an easy one. My attempt to explain is `this` references the instance or object that is active at the time it is used. Yes, `this` is interchangeable with `myObject` as I used it. But no the same does not work within the tag - in this context `this` refers to the element object, so this.writeIt is meaningless. See discussion on `this` for c# [here](http://stackoverflow.com/questions/6270774/what-is-the-meaning-of-this-in-c-sharp) which may help. — alwaysLearning, Nov 25 '13 at 01:03
Thanks, alwaysLearning. I have been trying to figure "this" out for some time. — HST, Dec 01 '13 at 16:51

getElementById not working - not returning anything at all

3 Answers3