javascript variable undefined or null

Question

couldn't find a specfic answer elsewhere. I'm totally new to JS and trying to pull a value out of a form and write it to the page. The result when I try to write ProductName is undefined, and when I try to write ProductNameElement is null. I'm sure it's to do with the form values being empty when the page loads but not sure after that...

<script>

    var ProductNameElement = document.getElementById("ProductName");
    var ProductName = ProductNameElement.value;

    function showname(){

    document.write(ProductName);

    }

</script>

<h2>Revenues</h2>

<div class="number">Product Name: <input type="text" id="ProductName" value=""></input></div>

<input type="button" value"showname" onclick="showname();"></input>

nope, it's that the HTML parser did not yet have a chance to know about the two elements by the time it got to your script, because your script is located and run before the definition of the tags it references. Better put that code as a function in the onload event handler of your page. — The Paramagnetic Croissant
– The Paramagnetic Croissant, Commented Aug 10, 2014 at 7:04
@TheParamagneticCroissant - you're right, misread the code - I deleted my comment. — jfriend00
– jfriend00, Commented Aug 10, 2014 at 17:20

jfriend00 · Accepted Answer · 2014-08-10 17:20:15Z

You are running the first two lines of your script too early BEFORE the elements in your page have been parsed and placed into the DOM. Because of that, the ProductName element doesn't exist yet when you're trying to find it with document.getElementById("ProductName");.

Place your script right before the </body> tag and then all your page elements will be available when you run your script. Or, just put all your code in the showname function that isn't called until the click event.

function showname(){

    var ProductNameElement = document.getElementById("ProductName");
    var ProductName = ProductNameElement.value;

    document.write(ProductName);
}

And, as others have said, using document.write() after the documented has been loaded will cause the existing document to be cleared and a new empty document will be created. This is pretty much never what you want. If you're just doing this for debugging, use console.log(ProductName) and look at the debug console.

adeneo · Accepted Answer · 2014-08-10 07:10:03Z

0

You'll have to get the element and the value inside the function, otherwise they aren't available, and the change of the value isn't caught

<script>
    function showname(){
        var ProductNameElement = document.getElementById("ProductName");
        var ProductName = ProductNameElement.value;

        document.write(ProductName);
    }
</script>

<h2>Revenues</h2>

<div class="number">
    Product Name: <input type="text" id="ProductName" value="" />
</div>

<input type="button" value"showname" onclick="showname();" />

FIDDLE

And inputs are self closing, and you should stop using document.write, it will overwrite the entire document and remove everything that is currently there !

edited Aug 10, 2014 at 7:10

answered Aug 10, 2014 at 7:04

adeneo

319k29 gold badges410 silver badges392 bronze badges

Collectives™ on Stack Overflow

javascript variable undefined or null

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related