Tuesday, May 28, 2024
Homepage · function
 Popular · Latest · Hot · Upcoming
25
rated 0 times [  28] [ 3]  / answers: 1 / hits: 21476  / 8 Years ago, tue, november 8, 2016, 12:00:00

In the 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 by a simple onclick of a button. There are 5 textarea elements and the user may input a number in any, and upon clicking the button the value should be stored in these vars if the textarea value isn't empty (Although it doesn't work even if the empty condition is not present).

If I remove the entire block, updateValues() executes fine, whereas putting it back causes it not be executed, so the problem's with it. What's the reason for this and how do I fix this?



Edit: The console says the following:




Uncaught TypeError: Cannot read property 'value' of null at TRANSACT at HTMLButtonElement.onclick




So what's the cause of this error? It doesn't work when I input all text fields and their values are not null.


More From » function
 Answers
7

Uncaught TypeError: Cannot read property 'value' of null




That tells you that at least one of those elements doesn't exist as of when that code runs, so getElementById returns null, which you're trying to read the value property from.



getElementById will only return null if no element with the given ID exists in the document as of when you call it. In general, the reasons for the element not existing fall into these categories:




  1. Calling getElementById too early

  2. Misspelling the id (e.g., a typo)

  3. Using a name instead of an id

  4. The element exists, but isn't in the document (rare)



In your case, since this is on button click, it's probably #2 or #3. You can see which ID it's unhappy about by looking at the line the error identifies, or using your browser's debugger to step through the code statement-by-statement.



Let's look at each category:



1. Calling getElementById too early



One common error is to have code calling getElementById in a script block that's before the element in the HTML, like this:



<script>

document.getElementById(foo).innerHTML = bar;

</script>

<!-- ...and later... -->

<div id=foo></div>


The element doesn't exist as of when that code runs.



Solutions:




  • Move the script to the end of the HTML, just before the closing </body. tag

  • Put your call to getElementById in a callback, such as on the DOMContentLoaded event, or a button click , etc.



Don't use window.onload or <body onload=...> unless you really want to wait to run the code until all external resources (including all images) have been loaded.



2. Misspelling the id



This is really common, using getElementById(ofo) when the element is defined with id=foo.



Example:



<div id=foo></div>

<script>

document.getElementById(ofo).innerHTML = I'm foo; // Error

</script>


Solution: Use the right ID. :-)



3. Using a name instead of an id



getElementById(foo) looks for an element with id=foo, not with 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 look up the element with document.querySelector('[name=foo]').)



4. The element exists, but isn't in the document



getElementById looks in the document for the element. So if the element has been created, but has not been added to the document anywhere, it won't find it.



Example:



var div = document.createElement(div);

div.id = foo;

console.log(document.getElementById(foo)); // null


It doesn't look throughout memory, it just looks in the document (and specifically, the document you call it on; different frames have different documents, for instance).



Solution: Make sure the element is in the document; perhaps you forgot to append it after creating it? (But in the example above, you already have a reference to it, so you don't need getElementById at all.)


[#60139] Sunday, November 6, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
masonm
Add To Favorites
Follow
Total Points: 167
Total Questions: 87
Total Answers: 103
Location: Rwanda
Member since Wed, Jun 8, 2022
2 Years ago
masonm questions
Mon, May 3, 21, 00:00, 3 Years ago
Sat, Nov 7, 20, 00:00, 4 Years ago
Mon, Oct 12, 20, 00:00, 4 Years ago
Sun, Aug 9, 20, 00:00, 4 Years ago
Wed, Dec 18, 19, 00:00, 5 Years ago
View All
;