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!

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!

• javascript

• 1 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 ♦ Commented Apr 25, 2013 at 13:41
• 1 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 ♦ Commented Apr 25, 2013 at 13:43
• 3 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 Commented Apr 25, 2013 at 13:46
• 1 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 Commented Apr 25, 2013 at 13:52
• 1 @AbdelouahabPp that's not even the error in your question. – Henrik Andersson Commented Apr 25, 2013 at 13:57

2 Answers 2

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/EqtQz/

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

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!