Avatar of webdott
webdottFlag for United States of America asked on

urgent! onclick(this) checkbox to work in IE & Firefox

I have the below code from a previous post.
It works great in IE, but not at all in Firefox.

Any suggestions on how to make it work in Firefox?

<HTML>
 <HEAD>
  <TITLE>Untitled</TITLE>
  <SCRIPT TYPE="text/javascript">
  function clickonce(o)
  {
    if (o.checked==false)
    {
      o.checked = true;
      return true;
    }
  }
 
  function clicktwice(o)
  {
    if (o.checked==true)
      o.checked = false;
  }
</SCRIPT><SCRIPT
   LANGUAGE="javascript" TYPE="text/javascript">
<!--

function changeColor(color,target) {
   target.style.color = color;
}

// -->
</SCRIPT><SCRIPT
   TYPE="text/javascript">
      function checkChecked(obj,group)
      {
            var maxchecked = 2;
            var chkcount = 0;
            var els = obj.form.elements;
            for(var i=0; i<els.length; i++)
            {
                  if(group && els[i].type.toLowerCase()=="checkbox" && els[i].className==group && els[i].checked && els[i].tagName.toLowerCase() == 'input')
                  {
                        var typ = els[i].type.toLowerCase();
                        if((typ == 'checkbox' || typ =='radio'))
                        {
                              if(els[i].checked)
                              {
                                    chkcount++;
                              }
                              if(chkcount > maxchecked)
                              {
                                   obj.checked = false;
alert('Sorry, you can select only ' + maxchecked + ' choices');
return;
                              }
                        }
                  }
            }
view(obj);
      }
      </SCRIPT><SCRIPT
   TYPE="text/javascript">
function show(id)
{
document.getElementById(id).style.display='';
}
function hide(id)
{
document.getElementById(id).style.display='none';
}
</SCRIPT><SCRIPT
   TYPE="text/javascript">
function hideDiv(range){
tag = document.getElementsByTagName("div");
for(x=0;x<tag.length; x++){
if(tag[x].getAttribute('id').indexOf(range) != -1){
tag[x].style.display = "none";
}
}
}
function view(id){
ge = document.getElementById('choose_' + id.value);
hideDiv("choose_" + id.value.substring(0,1)); //choose_a, choose_b or choose_c
ge.style.display = "block";
}
</SCRIPT><STYLE>
 
 
 
 
 
 
 
 
 
 
 
 
 
body { font-family: arial;font-size: 77%;color: 808080;}
</STYLE>
 <STYLE>
 
 
 
 
 
 
 
 
 
 
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
a:hover { text-decoration: underline; color: black }
#pup {position:absolute; visibility:hidden; z-index:200; width:260; }
</STYLE>
 </HEAD>
 <BODY TEXT="GRAY" LINK="#0099FF" VLINK="#0099FF" ALINK="#0099FF">
  <P STYLE="margin-top : -14.0pt;" ALIGN=CENTER>
   <FONT FACE="Arial,Helvetica,Monaco"><FONT SIZE="1"><!-- $MVD$:spaceretainer() --></FONT></FONT>&nbsp;</P>
  <P STYLE="margin-top : -14.0pt;" ALIGN=CENTER>
   <FONT FACE="Arial,Helvetica,Monaco"><FONT SIZE="1"><!-- $MVD$:spaceretainer() --></FONT></FONT>&nbsp;</P>
  <FORM NAME="myform">
   <P>
    question # 1</P>
   <P>
    <INPUT TYPE=CHECKBOX NAME="1" VALUE="aa" CLASS="q1" ONDBLCLICK="clicktwice(this);" ONCLICK="clickonce(this);checkChecked(this,this.className);"><FONT FACE="Arial,Helvetica,Monaco"><FONT SIZE="2"> <INPUT TYPE=CHECKBOX NAME="2" VALUE="ab" ONDBLCLICK="clicktwice(this)" ONCLICK="clickonce(this);checkChecked(this,this.className);" CLASS="q1" /> <INPUT TYPE=CHECKBOX NAME="3" VALUE="ac" ONDBLCLICK="clicktwice(this)" ONCLICK="clickonce(this);checkChecked(this,this.className);" CLASS="q1" /> <INPUT TYPE=CHECKBOX NAME="4" VALUE="ad" ONDBLCLICK="clicktwice(this)" ONCLICK="clickonce(this);checkChecked(this,this.className);" CLASS="q1" /></FONT></FONT></P>
   <P>
    <FONT FACE="Arial,Helvetica,Monaco"><FONT SIZE="2"><!-- $MVD$:spaceretainer() --></FONT></FONT>&nbsp;</P>
   <P>
    <!-- $MVD$:spaceretainer() -->&nbsp;</P>
   <P ALIGN=LEFT>
    &nbsp;&nbsp;&nbsp;</P>
   <DIV>
    <P ALIGN=LEFT>
     <TABLE WIDTH="500" CELLPADDING="0" CELLSPACING="0" BORDER="0">
      <TR>
       <TD WIDTH="100%" VALIGN=TOP>
        <DIV style="display:none;" id="choose_aa">
         <P>
          page1</P>
         </DIV>
        <DIV style="display:none;" id="choose_ab">
         <P>
          page 2</P>
         </DIV>
        <DIV style="display:none;" id="choose_ac">
         <P>
          page 3</P>
         </DIV>
        <DIV style="display:none;" id="choose_ad">
         <P>
          page 4</P>
         </DIV>
        <P>
         <!-- $MVD$:spaceretainer() -->&nbsp;</TD>
      </TR>
     </TABLE></P>
    </DIV>
   <P ALIGN=LEFT>
    <!-- $MVD$:spaceretainer() -->&nbsp;</P>
   <P ALIGN=LEFT>
    <!-- $MVD$:spaceretainer() -->&nbsp;</P>
   </FORM>
  <P ALIGN=CENTER>
   <FONT FACE="Arial,Helvetica,Monaco"><FONT SIZE="1"><!-- $MVD$:spaceretainer() --></FONT></FONT>&nbsp;
 </BODY>
</HTML>

Thanks
JavaScript

Avatar of undefined
Last Comment
webdott

8/22/2022 - Mon
Albert Van Halen

It happens in the hideDiv function.
The getAttribute function returns null if the specified attribute is not set.
So you're trying to use the indexOf function on a null object...

Why don't you just use:
if(tag[x].id.indexOf(range) != -1)
ASKER CERTIFIED SOLUTION
hernst42

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
webdott

thanks hernst42 - that works in bot ie & firefox

here is the final code:
<HTML>
 <HEAD>
  <TITLE>Untitled</TITLE>
  <SCRIPT TYPE="text/javascript">
  function clickonce(o)
  {
    if (o.checked==false)
    {
      o.checked = true;
      return true;
    }
  }
 
  function clicktwice(o)
  {
    if (o.checked==true)
      o.checked = false;
  }
</SCRIPT><SCRIPT
   LANGUAGE="javascript" TYPE="text/javascript">
<!--
 
function changeColor(color,target) {
   target.style.color = color;
}
 
// -->
</SCRIPT><SCRIPT
   TYPE="text/javascript">
      function checkChecked(obj,group)
      {
            var maxchecked = 2;
            var chkcount = 0;
            var els = obj.form.elements;
            for(var i=0; i<els.length; i++)
            {
                  if(group && els[i].type.toLowerCase()=="checkbox" && els[i].className==group && els[i].checked && els[i].tagName.toLowerCase() == 'input')
                  {
                        var typ = els[i].type.toLowerCase();
                        if((typ == 'checkbox' || typ =='radio'))
                        {
                              if(els[i].checked)
                              {
                                    chkcount++;
                              }
                              if(chkcount > maxchecked)
                              {
                                   obj.checked = false;
alert('Sorry, you can select only ' + maxchecked + ' choices');
return;
                              }
                        }
                  }
            }
view(obj);
      }
      </SCRIPT><SCRIPT
   TYPE="text/javascript">
function show(id)
{
document.getElementById(id).style.display='';
}
function hide(id)
{
document.getElementById(id).style.display='none';
}
</SCRIPT><SCRIPT
   TYPE="text/javascript">
function hideDiv(range){
tag = document.getElementsByTagName("div");
for(x=0;x<tag.length; x++){
if(tag[x].getAttribute('id') && tag[x].getAttribute('id').indexOf(range) != -1){
tag[x].style.display = "none";
}
}
}
function view(id){
ge = document.getElementById('choose_' + id.value);
hideDiv("choose_" + id.value.substring(0,1)); //choose_a, choose_b or choose_c
ge.style.display = "block";
}
</SCRIPT><STYLE>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
body { font-family: arial;font-size: 77%;color: 808080;}
</STYLE>
 <STYLE>
 
 
 
 
 
 
 
 
 
 
 
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
a:hover { text-decoration: underline; color: black }
#pup {position:absolute; visibility:hidden; z-index:200; width:260; }
</STYLE>
 </HEAD>
 <BODY TEXT="GRAY" LINK="#0099FF" VLINK="#0099FF" ALINK="#0099FF">
  <P STYLE="margin-top : -14.0pt;" ALIGN=CENTER>
   <FONT FACE="Arial,Helvetica,Monaco"><FONT SIZE="1"><!-- $MVD$:spaceretainer() --></FONT></FONT>&nbsp;</P>
  <P STYLE="margin-top : -14.0pt;" ALIGN=CENTER>
   <FONT FACE="Arial,Helvetica,Monaco"><FONT SIZE="1"><!-- $MVD$:spaceretainer() --></FONT></FONT>&nbsp;</P>
  <FORM NAME="myform">
   <P>
    question # 1</P>
   <P>
    <INPUT TYPE=CHECKBOX NAME="1" VALUE="aa" CLASS="q1" ONDBLCLICK="clicktwice(this);" ONCLICK="clickonce(this);checkChecked(this,this.className);"><FONT FACE="Arial,Helvetica,Monaco"><FONT SIZE="2"> <INPUT TYPE=CHECKBOX NAME="2" VALUE="ab" ONDBLCLICK="clicktwice(this)" ONCLICK="clickonce(this);checkChecked(this,this.className);" CLASS="q1" /> <INPUT TYPE=CHECKBOX NAME="3" VALUE="ac" ONDBLCLICK="clicktwice(this)" ONCLICK="clickonce(this);checkChecked(this,this.className);" CLASS="q1" /> <INPUT TYPE=CHECKBOX NAME="4" VALUE="ad" ONDBLCLICK="clicktwice(this)" ONCLICK="clickonce(this);checkChecked(this,this.className);" CLASS="q1" /></FONT></FONT></P>
   <P>
    <FONT FACE="Arial,Helvetica,Monaco"><FONT SIZE="2"><!-- $MVD$:spaceretainer() --></FONT></FONT>&nbsp;</P>
   <P>
    <!-- $MVD$:spaceretainer() -->&nbsp;</P>
   <P ALIGN=LEFT>
    &nbsp;&nbsp;&nbsp;</P>
   <DIV>
    <P ALIGN=LEFT>
     <TABLE WIDTH="500" CELLPADDING="0" CELLSPACING="0" BORDER="0">
      <TR>
       <TD WIDTH="100%" VALIGN=TOP>
        <DIV style="display:none;" id="choose_aa">
         <P>
          page1</P>
         </DIV>
        <DIV style="display:none;" id="choose_ab">
         <P>
          page 2</P>
         </DIV>
        <DIV style="display:none;" id="choose_ac">
         <P>
          page 3</P>
         </DIV>
        <DIV style="display:none;" id="choose_ad">
         <P>
          page 4</P>
         </DIV>
        <P>
         <!-- $MVD$:spaceretainer() -->&nbsp;</TD>
      </TR>
     </TABLE></P>
    </DIV>
   <P ALIGN=LEFT>
    <!-- $MVD$:spaceretainer() -->&nbsp;</P>
   <P ALIGN=LEFT>
    <!-- $MVD$:spaceretainer() -->&nbsp;</P>
   </FORM>
  <P ALIGN=CENTER>
   <FONT FACE="Arial,Helvetica,Monaco"><FONT SIZE="1"><!-- $MVD$:spaceretainer() --></FONT></FONT>&nbsp;
 </BODY>
</HTML>

Open in new window

ASKER
webdott

thanks that was perfect and fast at getting a answer.
i appreciate all your help and the ease of making it simple
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck