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:

  1. calling getelementbyid early
  2. misspelling id (e.g., typo)
  3. using name instead of id
  4. 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 script end of html, before closing </body. tag
  • put call getelementbyid in callback, such on domcontentloaded event, 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

Popular posts from this blog

iOS: Performance of reloading UIImage(name:...) -

i have tableview , each row has icon. 90% of rows have same icon. in cellforrowatindexpath method load image assets folder this: var cellimage = uiimage(named: "myimage") does pose performance problem? os somehow smart enough it's same image each time? better if loaded image once , saved in class variable , assigned each time? uiimage 's named: api does kind of caching. if @ uiimage's documentation , states: use init(named:in:compatiblewith:) method (or init(named:) method) create image image asset or image file located in app’s main bundle (or other known bundle). because these methods cache image data automatically, recommended images use frequently.
Read more

How to prevent logback from emitting repeated "Empty watch file list. Disabling" messages -

i have logback configured logback.xml located here: http://pastebin.com/kuquekxy . every minute, see log message emitted of form: 18:26:21,486 |-info in reconfigureonchangetask(born:1478715201485) - empty watch file list. disabling why happening , how can rid of these? i can tell why happening, not how rid of them. the reconfigureonchangetask log line when doesn't have files watch. and doesn't have files watch because file in jar, , only watch files on filesystem . makes sense, because files within jar file don't change.
Read more

c# SetCompatibleTextRenderingDefault must be called before the first -

i tried search exception couldn't find solution on case i'am using code below invoke .net application : assembly assem = assembly.load(data); methodinfo method = assem.entrypoint; var o = activator.createinstance(method.declaringtype); method.invoke(o, null); the application invoked has form , in entrypoint of application : [stathread] static void main() { application.enablevisualstyles(); application.setcompatibletextrenderingdefault(false); //exception application.run(new form1()); } setcompatibletextrenderingdefault must called before first iwin32window object created in application. edit : assembly = assembly.load(data); methodinfo method = a.gettype().getmethod("start"); var o = activator.createinstance(method.declaringtype); method.invoke(o, null); you should create new method skips initialization...
Read more