javascript以相反的方式工作

我一直在尝试使用“选择”列表以及javascript。我做了一个隐藏或显示部分html代码的Javascript函数，但它的工作方式与此相反，我不知道我出错的地方，因为代码似乎很简单。javascript以相反的方式工作

我的JS功能

<script type="text/javascript" language="javascript">  


    function toggle(id) { 

     if(document.getElementById(id).value=='IELTS' || document.getElementById(id).value=='TOEFL') 
     { 
      if(document.getElementById('dv1').style.display=='block') 
      { 
       document.getElementById('dv1').style.display='none'; 
       document.getElementById('dv1').style.visibility='hidden'; 
      } 
     } 
     else 
     { 
      document.getElementById('dv1').style.display='block'; 
      document.getElementById('dv1').style.visibility='visible'; 
      //alert('Its displaying now'); 
     } 


     if(document.getElementById(id).value=='Other') 
     { 
      if(document.getElementById('dv2').style.display=='block') 
      { 
       document.getElementById('dv2').style.display='none'; 
       document.getElementById('dv2').style.visibility='hidden'; 
      } 

     } 
     else 
     { 
      document.getElementById('dv2').style.display='block'; 
      document.getElementById('dv2').style.visibility='visible'; 
     } 


     if(document.getElementById(id).value=='none') 
     { 
       document.getElementById('dv1').style.display='none'; 
       document.getElementById('dv1').style.visibility='hidden'; 
       document.getElementById('dv2').style.display='none'; 
       document.getElementById('dv2').style.visibility='hidden'; 
     } 



    } 
</script>

的问题是，第一个“如果”语句显示/隐藏“DV2”而不是“DV1”，第二个“如果”语句显示/隐藏“DV1 “而不是”dv2“，虽然一切都被指定为使得FIRST”if“语句处理”dv1“并且SECOND”if“语句处理”dv2“的方式，我是否理解了如何理解JS的作品..

这里的样式是预定义的，使html c颂隐藏

<style type="text/css"> 
.toggleClass{ 
    display:none; 
    visibility:hidden; 
    } 
</style> 
</head> 



<body> 

<form name="myform" >

这是选择在这里我呼吁变化的JS功能

<select id="exam" name="exam" onchange="toggle('exam')"> 
    <option selected="selected" value="none" >Please Choose</option> 
    <option value="IELTS">IELTS</option> 
    <option value="TOEFL">TOEFL</option> 
    <option value="Other">Other</option> 
    </select> 
    <br><br>

这是DV1

<div id="dv1" class="toggleClass"> 
    <table width="50%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td height="600" bgcolor="#CCCCCC">IELTS and TOEFL</td> 
     </tr> 
    </table> 
</div>

这是DV2

<div id="dv2" class="toggleClass"> 
    <table width="50%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td height="600" bgcolor="#CCCCCC">Other</td> 
     </tr> 
    </table> 
</div> 
</form> 
</body> 
</html>

注意它工作正常，如果我交换“dv1”和“d V2" ！

来源

2012-09-24 user1693803

你可以请小提琴吗？它太长了，看到Fiddle上的代码会很好。 –

好吧，我删除了所有我在JavaScript函数中的评论，以便它被呈现为一个块，是更好的吗？ – user1693803

给我一分钟。谢谢ll通过！ –

考虑的代码块： -

if(document.getElementById(id).value=='Other') 
     { 
      if(document.getElementById('dv2').style.display=='block') 
      { 
       document.getElementById('dv2').style.display='none'; 
       document.getElementById('dv2').style.visibility='hidden'; 
      } 

     } 
     else 
     { 
      document.getElementById('dv2').style.display='block'; 
      document.getElementById('dv2').style.visibility='visible'; 
     }

从这里看出，如果你选择了“其他”，那么在这种情况下，格两人将永远不会出现。由于条件是如此，其中的其他条件如下所述： -

else 
     { 
      document.getElementById('dv1').style.display='block'; 
      document.getElementById('dv1').style.visibility='visible'; 
      //alert('Its displaying now'); 
     }

将显示DIV1，你有你正在寻求一定是这样的validated.The脚本提到如下： -

<script type="text/javascript" language="javascript">  


    function toggle(id) { 

     if(document.getElementById(id).value=='IELTS' || document.getElementById(id).value=='TOEFL') 
     { 
      if(document.getElementById('dv1').style.display=='block') 
      { 
       document.getElementById('dv1').style.display='block'; 
       document.getElementById('dv1').style.visibility='visible'; 

      } 
     } 
     else 
     {

document.getElementById（'dv1'）。style.display ='none';

  document.getElementById('dv1').style.visibility='hidden'; 
      //alert('Its displaying now'); 
     } 


     if(document.getElementById(id).value=='Other') 
     { 
      if(document.getElementById('dv2').style.display=='block') 
      { 
       document.getElementById('dv2').style.display='block'; 
       document.getElementById('dv2').style.visibility='visible'; 
      } 

     } 
     else 
     { 
      document.getElementById('dv2').style.display='none'; 
      document.getElementById('dv2').style.visibility='hidden'; 

     } 


     if(document.getElementById(id).value=='none') 
     { 
       document.getElementById('Table1').style.display='none'; 
       document.getElementById('Table1').style.visibility='hidden'; 
       document.getElementById('Table2').style.display='none'; 
       document.getElementById('Table2').style.visibility='hidden'; 
     } 



    } 
</script>

试试看，知道它是否有效。

来源

2012-09-24 08:46:56

第一：只有当这个属性有内联样式时才设置样式属性。

所以在你的DIV，你应该插入一个样式属性

<div id="dv1" class="toggleClass" style="visibility:hidden; display:none">

同为DIV2

之后...逻辑似乎不正确：

if(document.getElementById(id).value=='IELTS' || document.getElementById(id).value=='TOEFL')

这条线应该是可见的第一个div（div1）但经过这样的：

document.getElementById('dv1').style.display='none'; 
document.getElementById('dv1').style.visibility='hidden';

你躲吧！

来源

2012-09-24 09:00:42

javascript以相反的方式工作

回答

相关问题