CODEWITHSUNDEEP
javascripthtmlcsseventsvisibility
Denis.Sabolotni
Denis.Sabolotni

Reputation: 1698

Javascript hide element onclick, does not work


I created a little table in which you can click the datacells, what will trigger my Javascript to call a function. This function shows a little "formular" at the position of the clicked datacell. Now I added a button, that should hide this formular, but it does not work and I don't know why.

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/

Upvotes: 1

Views: 3231

Answers (5)

Phani Kumar M
Phani Kumar M

Reputation: 4590

There are two issues in your code:

  1. Your code to attach event listeners should be in window.onload.
  2. Your loop should be td.length-1. Instead of your code, you can use [].forEach.call to replace the below code:

//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; }

Below is the updated code:

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>

Upvotes: 1

zmuci
zmuci

Reputation: 538

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;
}

you need cellCount - 1

Upvotes: 0

user2887596
user2887596

Reputation: 643

Your problem is the fact that you can not assign onclick functions to hidden elements. Because of this your button never gets bound to the function hideDiv.

So I moved the lines:

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

inside the function example.

Here: https://jsfiddle.net/qc1dng63/3/

Upvotes: 0

lasha maraneli
lasha maraneli

Reputation: 87

Append onclick event when document is already loaded, in your fiddle I have found that you try to append before document loads itself, so it will not work.

better solution will be your html here 

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

//another functions

</script>

of cource, hideDiv must be defined somewhere.

this will ensure that HideButton will be loaded and defined when you try to append event.

Upvotes: 0

BALAJI R
BALAJI R

Reputation: 73

In this style you have added below css

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

here visibility hidden is hide all given html

Upvotes: 0

Related Questions