Question

I’m trying to hide or show a div based on the value of some radio buttons, css defaults the div to display=’none’

Here’s the input

<input type="radio" id="payment_type" value="cash" checked="checked" name="payment_type" onchange="showhideFinancing(this.value);"/>&nbsp;Cash/Debit
<input type="radio" id="payment_type" value="cheque" name="payment_type" onchange="showhideFinancing(this.value);"/>&nbsp;Cheque
<input type="radio" id="payment_type" value="visa" checked="checked" name="payment_type" onchange="showhideFinancing(this.value);"/>&nbsp;VISA
<input type="radio" id="payment_type" value="mc" name="payment_type" onchange="showhideFinancing(this.value);"/>&nbsp;Mastercard
<input type="radio" id="payment_type" value="financing" name="payment_type" onchange="showhideFinancing(this.value);"/>&nbsp;Financing

Here’s the div:

<div id="financing">
...
</div>

My Javascript fn looks like this:

function showhideFinancing(payment_type) {
    if (payment_type == "financing") {
        document.getElementById("financing").style.display = 'block';
    } else {
        document.getElementById("financing").style.display = 'none';
    }
}

Firebug shows that getElementById is not defined–Thanks!

Answer 1

The only reasons I can think that it might be saying “getElementById” is not defined is if either you made a typo in your original code that you didn’t while putting the sample up here (case sensitive is always the one that gets me) or if you have somehow redefined document elsewhere in the page.