How is this code not working in IE? Also the button should be an image button and not an ordinary one

advertisements

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.


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...