Почему этот код не работает в IE? Также кнопка должна быть кнопкой изображения, а не обычной - PullRequest
Новая
       12

Почему этот код не работает в IE? Также кнопка должна быть кнопкой изображения, а не обычной

2 голосов
/ 21 января 2012

Этот код работает в FF, но не в IE.

Мне непонятно, почему кнопка "clickme" все еще невидима в IE. Также, пожалуйста, измените кнопку на кнопку с пользовательским изображением. Вы используете любое случайное изображение, например image.JPG в коде

спасибо за вашу помощь. 

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

Проблема в том, что visible/hidden не работает в IE, т.е. когда я выбираю какую-либо опцию, я не вижу третью кнопку Click me, то есть приведенные ниже коды не работают 

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

То же самое работает в FF.

Ответы [ 2 ]

0 голосов
/ 21 января 2012

видимость и отображение - разные вещи, так же, как и их названия. Оба атрибута должны использоваться для всех элементов, которые имеют отображение или видимость.

Видимость проста. Элемент может быть видимым («видимое» значение), скрытым («скрытое» значение). В случае элементов таблицы Mozilla также использует значение «свернуть», а IE - нет.

Отображение является более сложным атрибутом. Значения зависят от типа отображения элемента (inline, block, list ....). Что касается таблицы и ее элементов, у Mozilla и IE разные взгляды. Moz использует значения DOM (см. http://www.w3.org/TR/REC-CSS2/tables.html#q2), в то время как IE просто использует значение block для положительного отображения.

Чтобы избежать сложного кросс-браузерного решения для всего этого, в случае видимости вы можете использовать пару «visible» / «hidden», а в случае отображения вы можете использовать пару «/ / none» это означает, что вы можете использовать пустое значение вместо «блока» 

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

Этот код будет работать в IE и FF в обоих местах ...

0 голосов
/ 21 января 2012

Обновите следующую строку в вашем javascript. IE сообщал об ошибке 'selList' is undefined 

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

Также рекомендуется добавить элемент <head> на вашу страницу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...