Home/ Questions/Q 7179865
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T17:13:40+00:00

This code works in FF but not in IE . Im stumped why the

  • 0

This code works in FF but not in IE .

Im stumped why the “clickme” button is still invisible in IE..
Also pls change the button to custom image button.. you use any random image like image.JPG in the code

thanks for your help.

<html> 
<script language="javascript"> 
var myLink = ""; 
function hideMe() { 
    document.getElementById('btn3').style.visibility='hidden'; 
} 

function setMyAdd() { 
    location.href=myLink; 
} 


function checkForChange() { 

    document.getElementById('btn1').style.visibility='visible'; 
    document.getElementById('btn2').style.visibility='visible'; 

    var buttonSelected=selList.value; 

    // alert("Option Selected is : " + buttonSelected ); 

    if (buttonSelected=="optx") { 
    myLink = "myPage2.html"; 
    document.getElementById('btn1').style.visibility='hidden'; 
    document.getElementById('btn2').style.visibility='visible'; 
    document.getElementById('btn3').style.visibility='visible'; 
    } else { 
    myLink = "myPage1.html"; 
    document.getElementById('btn1').style.visibility='visible'; 
    document.getElementById('btn2').style.visibility='hidden'; 
    document.getElementById('btn3').style.visibility='visible'; 
    } 
} 
</script> 
<body onLoad="hideMe()"> 
<form> 
<select onChange="checkForChange()" id="selList"> 
    <option value="opt1">Option 1</option> 
    <option value="opt2">Option 2</option> 
    <option value="opt3">Option 3</option> 
    <option value="optx">Option X</option> 
</select>  
<BR><br> 
<input type=button value="Option 1,2,3" id="btn1"> 
<BR> 
<input type=button value="Option X" id="btn2"> 
<BR> 
<input type=button value="Click me" id="btn3" onClick="setMyAdd()"> 
</form> 
</body> 
</html>

The problem is that visible/hidden are not working in IE i.e. when I select any option, I won’t see third button Click me i.e. below codes are not working

    document.getElementById('btn1').style.visibility='hidden'; 
    document.getElementById('btn2').style.visibility='visible'; 
    document.getElementById('btn3').style.visibility='visible';

Same is working in FF.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    visibility and display are different things, the same as their names mean. Both attributes are to be used for all the elements which have a display or a visibility.

    The visibility is simple. An element can be visible (‘visible’ value), hidden (‘hidden’ value).
    In case of the table’s elements, Mozilla uses also the ‘collapse’ value, but IE does not.

    The display is a more complex attribute. The values depends on the display type of the element (inline, block, list….). Regarding the table and table’s elements, Mozilla and IE have different visions. Moz uses the DOM values (see http://www.w3.org/TR/REC-CSS2/tables.html#q2 ) while IE simply uses ‘block’ value for as positive display.

    To avoid an intricate cross-browser solution for all these, in case of visibility, you mai use the pair ‘visible’/’hidden’, and in case of display you may use the pair ”/’none’ (that means you may use a blank value instead of ‘block’

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" > 
function showhide(att,val){
document.getElementById("hid").style[att]=val;
}
</script>
</head>
<body>
<form name="myform">
<table width="100%"  border="4" cellpadding="2" cellspacing="2">
    <tr>
        <td  class="tableheader" colspan="9">TS </td>
    </tr>
     <tbody id="hid">
    <tr>
        <td width="17%" class="labeltext">Tran Code</td>
        <td width="1%"  class="blanktext">:</td>
        <td colspan="4" class="blanktext">Name</td>
    </tr>
    <tr>
        <td width="17%" class="labeltext">Product Type</td>
        <td width="1%"  class="blanktext">:</td>
        <td colspan="4" class="blanktext">
        </td>
    </tr>
     </tbody>
    <tr>
       <td>
       </td>
    </tr>

</table>
Display
 <br>
<input type="button" onclick="showhide('display','')" value="Display on">
<input type="button" onclick="showhide('display','none')" value="Display off">
<br>
<br>
Visibility
<br>
<input type="button" onclick="showhide('visibility','visible')" value="Visibility on">
<input type="button" onclick="showhide('visibility','hidden')" value="Visibility off">
</form>
</body>
</html>

    This code will work in IE and FF both places…

    • 0