OnClick does not work

Question

Hi, this code does not work? When i try to click on the radiobutton, nothing happens. It is supposed that it is going to be disabled but nothing is disabled and enabled. Here is the code.

<script type="text/javascript">

function ann() 
{
document.getElementById('butta').disabled = true;
document.getElementById('strup').disabled = true;
document.getElementById('name').disabled = false;
}


function own() 
{
document.getElementById('butta').disabled = false;
document.getElementById('strup').disabled = false;
document.getElementById('name').disabled = true;
}

</script>


<input type="radio" name="checktype" id="ann" onclick="ann()" value="1"> Anime<br>
<input type="radio" name="checktype" id="own" onclick="own()" value="2"> My picture<br>

Answer 1

Your ids for the radio buttons are wrong.

Answer 2

This code is working!

1. Objects you are referencing to from functions are non-existent: butta, strup, name. Most possible, you have objects with this names, not id's. This is often mistake.
2. If you are unable to get javascript working at all this means only one - you may have syntax error somewhere.

One advice for future - use Firefox with Firebug add-on. This will save you your precious time.

Answer 3

That code is fine. Check the Firefox error console (Ctrl+Shift+J) when the page loads for possible sources of problems that might interfere with your functions being defined, and check it again after you've clicked on one of your radio buttons. If this isn't educational, try adding alert()s to ann() and own() so you can determine for certain whether they're being called at all.

Answer 4

It Works fine

add /edit to the URL to inspect the code and play around.

I closed the input and break elements in the example. Although the code works without these, I would consider it good practice to close them.

EDIT:

Updated example

This is to demonstrate that the code does work when you have a <select id="name">, <input type="file" id="strup" /> and <input type="button" id="butta" /> in the page. Works fine in Firefox 3 and IE 7.

There must be a problem elsewhere in the code

Answer 5

I think that the problem is that your IDs and your functions have the same name. Some browsers put HTML node IDs as properties into the global JavaScript scope. In such browsers, ann is basically the same as document.getElementById('ann').

Try renaming either your IDs or your functions so they do not share the same name. Something like this:

function annClick() 
{
document.getElementById('butta').disabled = true;
document.getElementById('strup').disabled = true;
document.getElementById('name').disabled = false;
}


function ownClick() 
{
document.getElementById('butta').disabled = false;
document.getElementById('strup').disabled = false;
document.getElementById('name').disabled = true;
}

</script>


<input type="radio" name="checktype" id="ann" onclick="annClick()" value="1"> Anime<br>
<input type="radio" name="checktype" id="own" onclick="ownClick()" value="2"> My picture<br>