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以相反的方式工作

回答

相關問題