Question

我创建了一个小桌子，您可以在其中单击数据中心，这将触发我的Javascript调用函数。此函数在单击的datacell的位置显示一个“公式”。现在我添加了一个按钮，应该隐藏这个公式，但它不起作用，我不知道为什么。

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

您的代码中存在两个问题：

附加事件监听器的代码应位于window.onload。
你的循环应该是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 () {
	[].forEach.call(document.getElementsByTagName("td"), function (el) {
		el.onclick = example;
	})

	//if clicked elsewhere, div has to become hidden again.

	//onlick hide, div box becomes hidden again
	document.getElementById("HideButton").onclick = hideDiv;
}

//functions
function example(idOfDatacells) {
	//this references the element, which called the function
	var rect = document.getElementById(this.id).getBoundingClientRect();

	document.getElementById("top").innerHTML = rect.top;
	document.getElementById("left").innerHTML = rect.left;

	var div = document.getElementById("movableDiv");
	div.style.visibility = "visible";
	div.style.top = rect.top + document.getElementById(this.id).clientHeight + "px";
	div.style.left = rect.left + "px";
}

//function for hiding formular
function hideDiv() {
	document.getElementById("movableDiv").style.visibility = "hidden";
}

table {
	width: 100%;
	margin: auto;
	position: relative;
}

td {
	text-align: center;
}

tr:nth-child(2) {
	background-color: lightgrey;
}

tr {
	height: 50px;
}

#movableDiv {
	background-color: lightgrey;
	position: absolute;
	visibility: hidden;
}

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

Answer 2

在这种风格中你添加了下面的css

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

此处隐藏可见性隐藏所有给定的html

Answer 3

当文档已经加载时附加onclick事件，在你的小提琴中我发现你试图在文档加载之前附加，所以它不起作用。

更好的解决方案你的HTML在这里

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

//another functions

</script>

的cource，hideDiv必须在某处定义。

这将确保在您尝试追加事件时加载和定义HideButton。

Answer 4

您的问题是您无法将隐藏元素分配给隐藏元素。因此，您的按钮永远不会被绑定到函数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

Javascript隐藏元素onclick，不起作用

5 个答案: