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