How come this code doesnt work in IE? Also the but

2019-05-28 13:07发布

站内文章 / JavaScript
14 0 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.

回答1:

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



回答2:

Update the following line in your javascript. IE was reporting the error 'selList' is undefined 

//var buttonSelected = selList.value;
var buttonSelected = document.getElementById('selList').value;

Also adding a <head> element to your page would be advisable.



标签： javascript select button drop-down-menu
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~