Javascript隱藏元素onclick，不工作

Question

我創建了一個小表，您可以在其中點擊datacells，什麼會觸發我的Javascript調用函數。這個功能在被點擊的數據集的位置顯示一個小的「公式」。現在我添加了一個按鈕，它應該隱藏這個公式，但它不起作用，我不知道爲什麼。

HTML：

<div id="movableDiv"> 
<form> 
<p>Some text:</p> 
<input type="text" name="someText"> 
<p>A number:</p> 
<input type="number" name="aNumber"> 
<button type="button" ="HideButton"> 
Hide 
</button> 
</form> 
</div> 

CSS：

#movableDiv{ 
    background-color: lightgrey; 
    position: absolute; 
    visibility: hidden; 
} 

的Javascript：

document.getElementById("HideButton").onclick = hideDiv; 
function hideDiv(){ 
document.getElementById("movableDiv").style.visibility = "hidden"; 
} 

https://jsfiddle.net/qc1dng63/2/

Answer 1

有在你的代碼的兩個問題：

1. 你的代碼添加事件偵聽器應該是window.onload。
2. 您的環路應該是td.length-1。而不是你的代碼，你可以使用[].forEach.call替換下面的代碼：

//all datacells safed in variable var datacells = document.getElementsByTagName("td"); //length of array var cellsCount = datacells.length; //iterate through array for (var i = 0; i <= cellsCount; i += 1) { //if any of this datacells get clicked, it will call function "example" with id of clicked element as parameter datacells[i].onclick = example; }

下面是更新後的代碼：

window.onload = function() { 
 
\t [].forEach.call(document.getElementsByTagName("td"), function (el) { 
 
\t \t el.onclick = example; 
 
\t }) 
 

 
\t //if clicked elsewhere, div has to become hidden again. 
 

 
\t //onlick hide, div box becomes hidden again 
 
\t document.getElementById("HideButton").onclick = hideDiv; 
 
} 
 

 
//functions 
 
function example(idOfDatacells) { 
 
\t //this references the element, which called the function 
 
\t var rect = document.getElementById(this.id).getBoundingClientRect(); 
 

 
\t document.getElementById("top").innerHTML = rect.top; 
 
\t document.getElementById("left").innerHTML = rect.left; 
 

 
\t var div = document.getElementById("movableDiv"); 
 
\t div.style.visibility = "visible"; 
 
\t div.style.top = rect.top + document.getElementById(this.id).clientHeight + "px"; 
 
\t div.style.left = rect.left + "px"; 
 
} 
 

 
//function for hiding formular 
 
function hideDiv() { 
 
\t document.getElementById("movableDiv").style.visibility = "hidden"; 
 
}

table { 
 
\t width: 100%; 
 
\t margin: auto; 
 
\t position: relative; 
 
} 
 

 
td { 
 
\t text-align: center; 
 
} 
 

 
tr:nth-child(2) { 
 
\t background-color: lightgrey; 
 
} 
 

 
tr { 
 
\t height: 50px; 
 
} 
 

 
#movableDiv { 
 
\t background-color: lightgrey; 
 
\t position: absolute; 
 
\t visibility: hidden; 
 
}

<table> 
 
\t <tr> 
 
\t \t <th>Header1</th> 
 
\t \t <th>Header2</th> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td id="tr1tc1">Data1</td> 
 
\t \t <td id="tr1tc2">Data2</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td id="tr2tc1">Data3</td> 
 
\t \t <td id="tr2tc2">Data4</td> 
 
\t </tr> 
 
</table> 
 
<div id="movableDiv"> 
 
\t <form> 
 
\t \t <p>Some text:</p> 
 
\t \t <input type="text" name="someText"> 
 
\t \t <p>A number:</p> 
 
\t \t <input type="number" name="aNumber"> 
 
\t \t <button id="HideButton" type="button"> 
 
Hide 
 
</button> 
 
\t </form> 
 
</div> 
 
<p id="top"> 
 
\t Top: 
 
</p> 
 
<p id="left"> 
 
\t Left: 
 
</p>

Answer 2

在這種風格已添加下面的CSS

#movableDiv{ 
    background-color: lightgrey; 
    position: absolute; 
    visibility: hidden; 
} 

這裏可見性隱藏是隱藏所有給定的HTML

Answer 3

追加當文件已加載，在你的提琴我發現，你試試文檔載入自己之前追加，所以它不會工作onclick事件。

更好的解決方案將是 你在這裏

<script> 
    function load(){ 
document.getElementById("HideButton").onclick = hideDiv; 
} 

//another functions 

</script> 

五言的

HTML，hideDiv必須在某處定義。

這將確保當您嘗試附加事件時，HideButton將被加載和定義。

Answer 4

您的問題是，您不能將onclick函數分配給隱藏的元素。正因爲如此，你的按鈕永遠不會被綁定到函數hideDiv。

所以我感動的臺詞：

//onlick hide, div box becomes hidden again 
document.getElementById("HideButton").onclick = hideDiv; 

功能例子裏面。

這裏：https://jsfiddle.net/qc1dng63/3/

Answer 5

for (var i = 0; i <= cellsCount - 1; i++) { 
    //if any of this datacells get clicked, it will call function "example" with id of clicked element as parameter 
    datacells[i].onclick = example; 
} 

你需要cellCount - 1