html - Javascript object is not a function

Question

I get the following error and I can't find why:

TypeError: object is not a function

Here is my html:

<td><input type="text" value="" id="cash_retained" name="cash_retained" onkeyup="net_cash()" size="25"></td>
<td><input type="text" value="" id="cash_change" name="cash_change" onkeyup="net_cash()" size="25"></td>
<td><input type="text" value="0" id="net_cash" name="net_cash"></td>

Here is my js function:

function net_cash() {
    var cash = 0;
    var retained = document.getElementById("cash_retained");
    var change = document.getElementById("cash_change");

    cash += parseInt(retained.value);
    cash += parseInt(change.value);

    if (isNaN(cash)) {
        document.getElementById("net_cash").value = "0";
    } else {
        document.getElementById("net_cash").value = cash;
    }
}

I can't see for the life of me why this is not working. I have other similar js functions that are finding it just fine.

Answer 1

It appears the problem here is that you have a form element with the same name as your function:

<td><input type="text" value="0" id="net_cash" name="net_cash"></td>

So when you call net_cash() in your onkeyup event, it thinks you are referring to this input DOM object rather than the function of the same name. I suggest coming up with separate names for these two things.

Inline event handlers have the enclosing <form> element as their executing scope. Each form control with a name attribute is treated as though it's a variable in that scope and that's where the conflict comes from.

This is also yet another great reason to use unobtrusive JavaScript instead of inline event handlers. If you do that, you don't have to worry about your function names conflicting with your element names. See onclick=“” vs event handler for more information on the pitfalls of using inline event handlers.