CODEWITHSUNDEEP
javascript
Abdelouahab Pp
Abdelouahab Pp

Reputation: 4440

How to avoid TypeError: Cannot set property 'onchange' of null

How can I avoid this error? It works, but I've always seen this error, here is the code:

function Separe(price) {
    nStr = Number(document.getElementById(price).value) * 100
    nStr += '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(nStr)) {
        nStr = nStr.replace(rgx, '$1' + ' ' + '$2');
    }
    return nStr + " Centimes"
}

function Forma(price, dest) {
    var handler = function(e) {
        document.getElementById(dest).innerHTML = Separe(price)
    };
    document.getElementById(price).onchange = handler; //line 50
    document.getElementById(price).onkeyup = handler;
}

and the HTML:

<input id="prix" type="number" name="prix" min="1" step="1">
<script>
    Forma("prix", "hhh"); //profil 148
</script>
<h1 id="hhh" >&nbsp;</h1>

My page is issuing an error on load:

Uncaught TypeError: Cannot set property 'onchange' of null formatter.js:50
Forma formatter.js:50
(anonymous function) profil:148

I did it to avoid to put twice onchange and onkeyup

The variable is not yet made, this is the cause of the error, but how do I avoid it? I tried even to add all variable and initialise them as nulls, but still getting the error!

Upvotes: 0

Views: 14631

Answers (2)

Abdelouahab Pp
Abdelouahab Pp

Reputation: 4440

it seems that i was a duplicate function in the code! the page uses accordion effect, and the function is called twice (buy area, and sell area), and it was bizarre that even the id were different, the code alerts errors; but ONLY THE FIRST CALL WORK, NOT THE SECOND.

in the second it was an id different:

<script>
Forma("hh", "max");
</script>

....

<script>
Forma("h", "min");
</script>

what i did, is to change to second to

<input .... onkeyup="document.getElementById('h').innerHTML = Separe('min')"  onchange="document.getElementById('h').innerHTML = Separe('min')"/>

and it worked! now Chrome dont alert me even that the first section (buy) will call the function as in my question!

Upvotes: 0

Henrik Andersson
Henrik Andersson

Reputation: 47212

The only way you can avoid this error entirely is by having the element you're asking for ready in the DOM when you query for it.

Assume you have this HTML:

<span id="monkey">Hey I'm a monkey</span>
Result for hopeful monkey:<span id="result"></span>
Result for not so hopeful monkey:<span id="noresult"></span>

and this javascript:

var hopefulMonkey = document.getElementById("monkey");
document.getElementById("result").innerHTML = hopefulMonkey;

var notSoHopefulMonkey = document.getElementById("noMonkeys");
document.getElementById("noresult").innerHTML = " "+notSoHopefulMonkey;

The output would be:

Hey I'm a monkey 
Result for hopeful monkey:[object HTMLSpanElement] 
Result for not so hopeful monkey: null

You're therefore trying to access an element that obviously doesn't exist yet or at all if you're getting that error.

That said, you have something else that's causing your trouble since the code you've posted works in Chrome. What version are you running?

I made a fiddle of your problem: http://jsfiddle.net/EqtQz/

I made a fiddle demonstrating my answer as well: http://jsfiddle.net/vB2Jp/1/ (it has monkeys so it's fun too!)

Upvotes: 1

Related Questions