2017-07-18 107 views
0

我想提出一個提示框,其中您單擊一個div和另一個從可見性=隱藏到可見性=可見的轉換。這是我的代碼到目前爲止,我不知道爲什麼它不工作。單擊Div使另一個Div出現

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <meta name="description" content=""> 
     <meta name="keywords" content=""> 
     <meta name="author" content="C.K."> 
     <title></title> 
     <link rel="stylesheet" href="./css/main.css"> 
     <script type="text/js"> 
      document.getElementById("addpanel").onclick = document.getElementById("selector").style.visibility = "visble"; 
     </script> 
    </head> 
    <body> 
     <div id="selector"> 
      SELECTOR 
     </div> 
     <div id="addpanel"> 
      <table id="add"> 
       <tr> 
        <td id="plus">+</td> 
       </tr> 
       <tr> 
        <td>Add New Item</td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html> 
+0

你附加處理的JS運行時不存在的元素。 –

回答

1

檢查了這一點:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <meta name="description" content=""> 
     <meta name="keywords" content=""> 
     <meta name="author" content="C.K."> 
     <title></title> 
    <link rel="stylesheet" href="./css/main.css"> 
</head> 
<body> 
    <div id="selector"> 
     SELECTOR 
    </div> 
    <div id="addpanel"> 
     <table id="add"> 
      <tr> 
       <td id="plus">+</td> 
      </tr> 
      <tr> 
       <td>Add New Item</td> 
      </tr> 
     </table> 
    </div> 
    <script type="text/javascript"> 
    document.getElementById("selector").style.visibility = "hidden"; 
    document.getElementById("addpanel").onclick = function(){document.getElementById("selector").style.visibility = "visible";}; 
    </script> 
</body> 

+0

這很好用!我可以問一下這種方法背後的理由嗎? – cobo16

+1

1st - 腳本始終位於HTML之後,因此可以找到元素。 2nd - 您將onclick屬性設置爲javascript函數,因此它將實際執行該語句。 我認爲就是這樣。 –

0

HTML從上到下被解析。您的腳本將立即運行,以防萬一它爲解析器生成更多HTML來處理(例如,使用document.write)。在document.getElementById("addpanel").onclick處,addpanel不存在,因爲HTML解析器尚未達到它。

將您的<script>塊移到您的apppanel元素的結束標記之後。

此外,onclick需要是一個功能。因此,這將是:

document.getElementById("addpanel").onclick = function() { 
    document.getElementById("selector").style.visibility = "visible" 
} 

快速工作示例:https://jsfiddle.net/m2q6ubuv/

+0

typo'visble' .... – ewwink

+0

我做了那些編輯,但它仍然沒有響應 – cobo16

+0

@ewwink哈哈我剛剛從問題中複製它,謝謝! –

0

試試這個

功能顯示(){ document.getElmenetById( '選擇')style.visibility =「可見。 「; }

然後只是把onclick='show()'如你想成爲的按鈕標籤的屬性。 另外,您應該將JavaScript放在頁面的末尾,即</body>標記的第一個。

+0

小提琴記住:這會讓你顯示div,但是那個按鈕不會再隱藏div ,爲此你必須使用更復雜的if/else JavaScript函數 – 2017-07-18 01:36:03