Home/ Questions/Q 6755437
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T13:24:00+00:00

To dumb it down, I have the following code highlighting my exact problem: <!DOCTYPE

  • 0

To dumb it down, I have the following code highlighting my exact problem:

<!DOCTYPE html><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
function updateR1(){
    if (c1.checked){
        r1.style.visibility='hidden';
    }
    else{
        r1.style.visibility='visible';
    }
}
function updateR2(){
    if (c2.checked){
        r2.style.display='none';
    }
    else{
        r2.style.display='table-row';
    }
}
</script>
</head>
<body>
    <table>
        <tr id="r1">
            <td>visibility</td>
        </tr>
        <tr id="r2">
            <td>display</td>
        </tr>
    </table>
    <div>
        <input id="c1" type=checkbox onchange="return updateR1();">Hide row 1</input>
        <input id="c2" type=checkbox onchange="return updateR2();">Hide row 2</input>
    </div>
</body>
</html>

Working example > http://s.supuhstar.operaunite.com/s/content/testHideShow.htm

In Opera, Chrome, IE, and Safari, the first checkbox makes the top row visible or invisible, and the second checkbox makes the second row compressed/invisible or extended/visible. However, in Firefox, neither of these work. Why not? I’ve tried many variations of this, including writing the raw script in the onchange attribute and using other event attributes, but it always works on everything BUT Firefox.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I am surprised that it’s working on other browsers…but firefox is not executing your JS for the right reasons…it’s wrong. Here is how you JS functions should be:

        function updateR1(){
    if (document.getElementById("c1").checked){
        document.getElementById("r1").style.visibility='hidden';
    }
    else{
        document.getElementById("r1").style.visibility='visible';
    }
}
function updateR2(){
    if (document.getElementById("c2").checked){
        document.getElementById("r2").style.display='none';
    }
    else{
        document.getElementById("r2").style.display='table-row';
    }
}

    BTW, use Firebug for firefox….your life will be heaven 😉

    • 0