getElementById

@meditateAug 30.2010

For some reason getElementById continues to tell me that it had grabbed a null value despite any value I input. I am using firefox 3.6.8. Am I doing something wrong here?

[CODE] <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

<head> <title> fibonacci sequence </title> <meta http-equiv=”content-type” content=”text/html;charset=utf-8″ /> <meta http-equiv=”Content-Style-Type” content=”text/css” />

<script type = “text/javascript”> <!– var valueInput = document.getElementById(“giggles”); var prev = 0; var holder = 0; var current = 0; while (current <= valueInput ) { holder = current; current += prev; prev = holder; if (current < 1) { current += 1; } } alert(“The ” + valueInput.value + ” value within the fibonacci sequence is ” + current + “!”); // –> </script>

</head> <body>

<body> <form id = “fibonacciForm” method =”post” action = “index2.html”> <p> <label><b> Enter a value: </b><br /> <input name=”giggles” id=”giggles” type=”text” size =”20″ />

</label> </p>

<p> <input type=”submit” value=”Submit” /> <input type=”reset” value=”Reset” /> </p> </form> </body>

</html>

[/CODE]

to post a comment

JavaScript

18 Comments(s) _↴

@savvykmsAug 30.2010 — #valueInput is defined as being a dom node object, not a numeric value. You are comparing your counter variable (int current) with an object (DomNodeWhatever valueInput)

[CODE]
 var valueInput = document.getElementById("giggles"); //add .value to the end to make it work better, but note that string input can contain characters that invalidate the input as a number.
 var prev = 0;
 var holder = 0;
 var current = 0;
 while (current <= valueInput ) //here
 [/CODE]

@meditateauthorAug 30.2010 — #Thank you for the response. I changed my code to:

[CODE]
 var valueInput = document.getElementById("giggles").value;
 var prev = 0;
 var holder = 0;
 var current = 0;
 valueInput = parseInt(valueInput);
 [/CODE]

I was hoping parseInt would prevent the input from being invalidated, but for some reason I still get null values in firefoxes error console. I must just be doing something wrong in the actual html.

@savvykmsAug 30.2010 — #the object's value property is considered null if there is no initial value i believe

@meditateauthorAug 30.2010 — #Even when I set the input to have an initial value of 7, I still receive this null error. Also, when I hit submit, no alert is presented. The only thing that happens is my error console outputs:

[CODE]
 Error: document.getElementById("giggles") is null
 Source File: file:///home/root/Desktop/index2.html
 Line: 16
 [/CODE]

@criterion9Aug 30.2010 — #This line is run before the DOM has been loaded containing your element:

var valueInput = document.getElementById("giggles");
[/quote]
You'll want to run your code using an onload handler.

@meditateauthorAug 31.2010 — #When using:
[CODE]var valueInput = document.getElementById("giggles").value[/CODE]

the alert:

[CODE] alert("The " + valueInput.value + " value within the fibonacci sequence is " + current + "!");
 [/CODE]

is never displayed. Without .value, the alert appears, however it displays NaN. Is there a reason why .value would prevent the alert from appearing?

@criterion9Aug 31.2010 — #Is your code still the same as before?

Note the following is not nested properly:
<label><b> Enter a value: </b><br />

<input name="giggles" id="giggles" type="text" size ="20" />

</label>[/quote]
Label elements shouldn't contain input elements:

<i>
 </i>&lt;label&gt;Enter a value:&lt;/label&gt;&lt;br /&gt;
 &lt;input name="giggles" id="giggles" type="text" size ="20" /&gt;

@JonaAug 31.2010 — #Is your code still the same as before?

Note the following is not nested properly:

Label elements shouldn't contain input elements:

<i>
 </i>&lt;label&gt;Enter a value:&lt;/label&gt;&lt;br /&gt;
 &lt;input name="giggles" id="giggles" type="text" size ="20" /&gt;

[/QUOTE]

[font=arial]I'm not sure why this matters (it shouldn't affect the JavaScript in this document either way, as far as I'm aware), but I thought I should point out that [/font][font=monaco]input[/font][font=arial] elements actually [i]belong[/i] nested within [/font][font=monaco]label[/font][font=arial] elements [i]unless[/i] the [/font][font=monaco]label[/font][font=arial] element's [/font][font=monaco]for[/font][font=arial] attribute references the target input element by its [/font][font=monaco]id[/font][font=arial]. Furthermore, additional HTML and text may be placed within a [/font][font=monaco]label[/font][font=arial] element. The following is valid HTML 4.01 Strict.[/font]

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;blah&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form method="post" action=""&gt;&lt;fieldset&gt;
 &lt;legend&gt;My form&lt;/legend&gt;
 &lt;label&gt;&lt;b&gt;Text&lt;/b&gt; &lt;br&gt; &lt;input type="text" name="hi" id="hi" value="test"&gt;&lt;/label&gt;
 &lt;label&gt;&lt;input type="submit"&gt;&lt;/label&gt;
 &lt;/fieldset&gt;&lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@criterion9Aug 31.2010 — #Thanks for the clarification. Learn something new every day.

@JonaAug 31.2010 — #[font=arial]Indeed! When I saw your comment, I questioned whether I'd been writing invalid HTML this way habitually, which is why I double checked. ;-) [/font]

@criterion9Aug 31.2010 — #Can we see the new code that produces the NaN problem? I'm suspecting that the elements are still not being loaded into the DOM before being accessed.

@Skark166Aug 31.2010 — #I suspect your value is a string value and not and integer. Maybe try this before your do/while loop.

<i>
 </i>valueInput = parseFloat(valueInput);

Then, before your alert, reconvert back to a string.

<i>
 </i>valueInput += "";

I may be way off here though.

@OfekmeisterSep 01.2010 — #This line is run before the DOM has been loaded containing your element:

You'll want to run your code using an onload handler.[/QUOTE]

Exactly.

@meditateauthorSep 01.2010 — #Can we see the new code that produces the NaN problem? I'm suspecting that the elements are still not being loaded into the DOM before being accessed.[/QUOTE]

[CODE]
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title> fibonacci sequence </title>
 <meta http-equiv="content-type" 
 content="text/html;charset=utf-8" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 
  <script type = "text/javascript">
   <!--
   var valueInput = 0;
   var prev = 0;
   var holder = 0;
   var current = 0;
   if (document.getElementById)
   {
   valueInput = document.getElementById("giggles");
   alert(valueInput);
   //outputs null
   valueInput = parseFloat(valueInput);
   while (current <= valueInput )
   {
   alert("This line was not executed!");
   holder = current;
   current += prev;
   prev = holder;
   if (current < 1)
   {
   current += 1;
   }
   }
   alert("The " + valueInput + " value within the fibonacci sequence is " + current + "!");
   //outputs The NaN value within the fibonacci sequence is 0!
   }
   // -->
  </script>
 
 </head>
 <body>
 
 <body>
 <form id = "fibonacciForm" method ="post" action = "index2.html">
 <p>
 <label><b> Enter a value: </b><br />
 <input name="giggles" id="giggles" type="text" size ="20" value="7" />
 
   </label>
   </p>
 
   <p>
   <input type="submit" value="Submit" />
   <input type="reset" value="Reset" />
   </p>
   </form>
 </body>
 
 </html>
 [/CODE]

When I use:
[CODE]valueInput = document.getElementById("giggles").value;[/CODE] The line that says " alert("This line was not executed!");" still is not executed.

@savvykmsSep 01.2010 — #Two issues with the code.

1) Two opening body tags

2) The script is run before the document starts to load content, meaning the textbox does not exist before you run document.getElementById("giggles").value.

This refers to

[CODE]
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title> fibonacci sequence </title>
 <meta http-equiv="content-type" 
 content="text/html;charset=utf-8" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 
  <script type = "text/javascript">
   <!--
   var valueInput = 0;
   var prev = 0;
   var holder = 0;
   var current = 0;
   if (document.getElementById)
   {
   valueInput = document.getElementById("giggles");
   alert(valueInput);
   //outputs null
   valueInput = parseFloat(valueInput);
   while (current <= valueInput )
   {
   alert("This line was not executed!");
   holder = current;
   current += prev;
   prev = holder;
   if (current < 1)
   {
   current += 1;
   }
   }
   alert("The " + valueInput + " value within the fibonacci sequence is " + current + "!");
   //outputs The NaN value within the fibonacci sequence is 0!
   }
   // -->
  </script>
 
 </head>
 <body>
 
 <body>
 <form id = "fibonacciForm" method ="post" action = "index2.html">
 <p>
 <label><b> Enter a value: </b><br />
 <input name="giggles" id="giggles" type="text" size ="20" value="7" />
 
   </label>
   </p>
 
   <p>
   <input type="submit" value="Submit" />
   <input type="reset" value="Reset" />
   </p>
   </form>
 </body>
 
 </html>
 [/CODE]

@criterion9Sep 01.2010 — #You still haven't used an onload handler as was stated previously. Your script is being executed before the html elements have been added to the DOM.

@meditateauthorSep 01.2010 — #I created a function called fibonacci and then added window.onload=fibonacci; at the end of my javascript. I was then able to use [CODE]valueInput = document.getElementById("giggles").value;[/CODE]

Everything works now. Thank you to everyone that helped out and was able to put up with my newbness.

@JoeyDSep 01.2010 — #Originally Posted by criterion9

This line is run before the DOM has been loaded containing your element:

You'll want to run your code using an onload handler.[/QUOTE]

I believe that wrapping the javascript code in a function and using the body tags onload event will resolve your issue. You code is trying to look up the input element before it is loaded.

Also in #JavaScript _↴

Prevent form from submitting when password not match Javascript frames question Find DOCTYPE with Javascript?

Success!

Help @meditate spread the word by sharing this article on Twitter...

Tweet This

getElementById

18 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

getElementById

18 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #JavaScript _↴