javascript - Why am I getting "TypeError: Cannot read property 'value' of null" when using getElementById? -
in following code:
function transact() { if(document.getelementbyid('itctobuy').value!='') { itctobuy = parseint(document.getelementbyid('itctobuy').value); } if(document.getelementbyid('steamtobuy').value!='') { steamtobuy = parseint(document.getelementbyid('steamtobuy').value); } if(document.getelementbyid('reltobuy').value!='') { reltobuy = parseint(document.getelementbyid('reltobuy').value); } if(document.getelementbyid('airtobuy').value!='') { airtobuy = parseint(document.getelementbyid('airtobuy').value); } if(document.getelementbyid('bsnltobuy').value!='') { bsnltobuy = parseint(document.getelementbyid('bsnltobuy').value); } updatevalues(); } the function's executed simple onclick of button. there 5 textarea elements , user may input number in any, , upon clicking button value should stored in these vars if textarea value isn't empty (although doesn't work if empty condition not present).
if remove entire block, updatevalues() executes fine, whereas putting causes not executed, problem's it. what's reason , how fix this?
edit: console says following:
uncaught typeerror: cannot read property 'value' of null @ transact @ htmlbuttonelement.onclick
so what's cause of error? doesn't work when input text fields , values not null.
uncaught typeerror: cannot read property 'value' of null
that tells @ least 1 of elements doesn't exist of when code runs, getelementbyid returns null, you're trying read value property from.
getelementbyid only return null if no element given id exists in document of when call it. in general, reasons element not existing fall these categories:
- calling
getelementbyidearly - misspelling
id(e.g., typo) - using
nameinstead ofid - the element exists, isn't in document (rare)
in case, since on button click, it's #2 or #3. can see id it's unhappy looking @ line error identifies, or using browser's debugger step through code statement-by-statement.
let's @ each category:
1. calling getelementbyid early
one common error have code calling getelementbyid in script block that's before element in html, this:
<script> document.getelementbyid("foo").innerhtml = "bar"; </script> <!-- ...and later... --> <div id="foo"></div> the element doesn't exist of when code runs.
solutions:
- move
scriptend of html, before closing</body.tag - put call
getelementbyidin callback, such ondomcontentloadedevent, or button click , etc.
don't use window.onload or <body onload="..."> unless want wait run code until all external resources (including images) have been loaded.
2. misspelling id
this common, using getelementbyid("ofo") when element defined id="foo".
example:
<div id="foo"></div> <script> document.getelementbyid("ofo").innerhtml = "i'm foo"; // error </script> solution: use right id. :-)
3. using name instead of id
getelementbyid("foo") looks element id="foo", not name="foo". name != id.
example:
<input name="foo" type="text"> <script> document.getelementbyid("foo").value = "i'm foo"; // error </script> solution: use id, not name. :-) (or element document.queryselector('[name="foo"]').)
4. element exists, isn't in document
getelementbyid looks in document element. if element has been created, has not been added document anywhere, won't find it.
example:
var div = document.createelement("div"); div.id = "foo"; console.log(document.getelementbyid("foo")); // null it doesn't throughout memory, looks in document (and specifically, document call on; different frames have different documents, instance).
solution: make sure element in document; perhaps forgot append after creating it? (but in example above, have reference it, don't need getelementbyid @ all.)
Comments
Post a Comment