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

Question

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!

Instead of changing the variable name, you should post the rest of your function and correctly indent the body. That would go much further towards avoiding confusion. — user229044
– user229044 ♦, Commented Apr 25, 2013 at 13:41
Holy crap. The problem is that you're leaving the closing } on the last line of the function, in both functions. Never do that. Several experienced programmers attempting to help you totally missed the presence of the closing }. This should be a pretty good indication that you've stumbled upon a coding style that is to be avoided. — user229044
– user229044 ♦, Commented Apr 25, 2013 at 13:43
document.getElementById(price) - you have to make sure this element always exists, if it doesn't then you'll keep getting the nulls. — Henrik Andersson
– Henrik Andersson, Commented Apr 25, 2013 at 13:46
No error being signaled in Chrome if you load that link where I copied and pasted your code. When Chrome reports the error, it should provide a link back to the line in the code where the error is happening — you should then be able to put a breakpoint in and debug. Where is that line? — Barney
– Barney, Commented Apr 25, 2013 at 13:52

Henrik Andersson · Accepted Answer · 2013-04-25 13:55:29Z

1

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!)

answered Apr 25, 2013 at 13:55

Henrik Andersson

47.5k16 gold badges102 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Barney Over a year ago

It's pretty clear in his markup that he's calling the function immediately after declaring the element in question in the markup — but then his code doesn't actually produce the error if you output it anyway.

Abdelouahab Pp Over a year ago

i'm on Version 26.0.1410.64 m and the value will not existe untill i onchange or onkeyup and i tried onload but dident work

Henrik Andersson Over a year ago

@AbdelouahabPp well, your code works you have something else that's bugging. What's on line 47 of your formatter.js?

Abdelouahab Pp Over a year ago

this happened after added function Forma(prix, dest) { document.getElementById(prix).value = "0" to try to add an initialized value, after removing it, i got the error in the line ` document.getElementById(prix).onchange = handler;`

Abdelouahab Pp · Accepted Answer · 2013-04-27 13:43:33Z

0

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!

edited Apr 27, 2013 at 13:43

answered Apr 27, 2013 at 13:34

Abdelouahab Pp

4,49012 gold badges46 silver badges66 bronze badges

1 Comment

Abdelouahab Pp Over a year ago

sorry, because when i wrote the answer it said that i have to wait, then the connexion cut (africa here)

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related