JavaScript and IE7 problem

R

Richard John

Can someone please help explain why the HTML/Javascript code snippet shown below
works in Firefox and Chrome, but not in IE7.0. I've worked on it for a couple of
days now, and can't see where the problem is. The code displays two radio
buttons (yes or no). Click on "yes" and the contents (2 check boxes) enclosed
within the DIV element, id="volunteer", are made visible. (Ordinarily wouldn't
have worried, but unfortunately, everything *has* to work in IE for
now.....before deployment):

<html>
<head>
<script type="text/javascript" language="javascript">
<!--
function showhide(objectname)
{
if (document.all)
return document.all[objectname];
else
return document.getElementById(objectname);
}

// **********
function hidevolunteer() {
showhide("volunteer").style.display = 'none';}

// **********
function showvolunteer(){
showhide("volunteer").style.display = '';}
//-->
</script>
</head>

<body>
Can you donate skills and time as a Volunteer?
<input type="radio" name="volunteer" value="-1" onClick="showvolunteer()" />Yes
<input type="radio" name="volunteer" value="0" onClick="hidevolunteer()" />No

<div id="volunteer" style="display:none">
If yes, then what skills can you offer?
<input type="checkbox" name="skills" value="Training" />Trainer
<input type="checkbox" name="skills" value="Demonstrator" />Demonstrator
</div>
</body>
</html>

Your help will be most appreciated. A working version (in FF and Chrome anyway)
is available at http://tinyurl.com/clcj63

Thanks
 
M

Martin Honnen

Richard said:
function showhide(objectname)
{
if (document.all)
return document.all[objectname];
else
return document.getElementById(objectname);
}
Click to expand...

Try without that showhide function, simply use
// **********
function hidevolunteer() {
showhide("volunteer").style.display = 'none';}
Click to expand...
document.getElementById("volunteer").style.display = 'none';
// **********
function showvolunteer(){
showhide("volunteer").style.display = '';}
Click to expand...
document.getElementById("volunteer").style.display = '';

Can you donate skills and time as a Volunteer?
<input type="radio" name="volunteer" value="-1"
Click to expand...

If IE still does not do that then choose a name for those radio buttons
that is different from the id of the div (i.e. "volunteer").
 
G

Guest

Can someone please help explain why the HTML/Javascript code snippet shown below
works in Firefox and Chrome, but not in IE7.0. I've worked on it for a couple of
days now, and can't see where the problem is. The code displays two radio
buttons (yes or no). Click on "yes" and the contents (2 check boxes) enclosed
within the DIV element, id="volunteer", are made visible. (Ordinarily wouldn't
have worried, but unfortunately, everything *has* to work in IE for
now.....before deployment):
Click to expand...

First turn on the script error reporter in IE. It points you to the bad
line -- it does not like the null display property. Use 'block' since this
is a div.

Second, as the other poster pointed out -- IE does not know the difference
between 'id' and 'name' so it uses the first.

Third, that showhide function is not need.

Fourth, you don';t really need functions but can just
onclick="document.getElementById("volunteerx").style.display = 'none' "

<html
<head>
<script type="text/javascript" language="javascript">
<!--
function hidevolunteer() {
document.getElementById("volunteerx").style.display = 'none';}
function showvolunteer(){
document.getElementById("volunteerx").style.display = 'block';}

function trythis(arg) {
document.getElementById("volunteerx").className=arg}
function try2 (arg) {
document.getElementById("volunteerx").style.display=arg}
--></script>
<style type="text/css"><!--
..yes{display:block}
..non{display:none}
--></style>
</head>
<body>

<p>Your way corrected
<input type="radio" name="volunteer" value="-1" onClick="showvolunteer()"
/>Yes
<input type="radio" name="volunteer" value="0" onClick="hidevolunteer()"
/>No
</p>

<p>easier way with style
<input type="radio" name="volunteer" value="-1" onClick="try2('block')"
/>Yes
<input type="radio" name="volunteer" value="0" onClick="try2('none')"
/>No</p>

<p>Useing class - does not mix with style.display
<input type="radio" name="volunteer" value="-1" onClick="trythis('yes')"
/>Yes
<input type="radio" name="volunteer" value="0" onClick="trythis('non')"
/>No</p>
<div id="volunteerx" class="non">

<p>If yes, then what skills can you offer?
<input type="checkbox" name="skills" value="Training" />Trainer
<input type="checkbox" name="skills" value="Demonstrator" />Demonstrator
</p></div>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Check forms With JavaScript 1
I dont get this. Please help me!! 2
Javascript DOM 1
Very Basic CC Validation Javascript 0
Positioning CSS components 1
another IE7 DOM screwup? 11
X.value problem 4
JavaScript code not working!! 6

Members online

No members online now.
Total: 34 (members: 2, guests: 32)
Robots: 445

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top