單擊Div使另一個Div出現

我想提出一個提示框，其中您單擊一個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>

來源

2017-07-18 cobo16

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

檢查了這一點：

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

來源

2017-07-18 01:35:38

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

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

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/

來源

2017-07-18 01:25:58

typo'visble' .... – ewwink

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

@ewwink哈哈我剛剛從問題中複製它，謝謝！ –

試試這個

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

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

來源

2017-07-18 01:32:03

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

單擊Div使另一個Div出現

回答

相關問題