div is not displayed on click of image

Question

I have an image at the top right corner of a page. on click of the image i have to display a div that looks like a table with many rows. The div has to be positioned exactly below the image.I have tried the below code snippet.

<div><a href="javascript:Test()"><img align=right src="Test.png" /></a></div>

sample code snippet for test function

Test(){
var hNode = document.createElement('div');
hNode.style.display = "block";
hNode.style.overflow="hidden";enter code here
hNode.style.position = "absolute"; 
hNode.style.width = "400px";
hNode.style.height = "30px";
hNode.style.border = "1px solid  #666666";
hNode .appendChild(document.createTextNode("Test"));
}

But the div does not show up. What is wrong with this snippet? Any help would be great..

what does your debugger say? you're missing the `function` keyword before `Test()`. Adding that the function is called — Pedro del Sol, Jan 22 '13 at 09:20

score 1 · Answer 1 · answered Jan 22 '13 at 09:19

1

Maybe use an onclick="Test()" in your <a> tag

answered Jan 22 '13 at 09:19

for completeness-sake... [there is debate as to best practices for triggering javascript in this way](http://stackoverflow.com/questions/245868/what-is-the-difference-between-the-different-methods-of-putting-javascript-code) – Pedro del Sol Jan 22 '13 at 09:26

score 0 · Answer 2 · answered Jan 22 '13 at 09:26

0

first : change a to <a href="javascript:void(0)" onclick="Test();">link</a>

second : in function implementation add function keyword before Test()

answered Jan 22 '13 at 09:26

Mahmoud Farahat

5,364
4
43
59

score 0 · Answer 3 · answered Jan 22 '13 at 09:26

0

 <div onclick="Test()"><img align=right src="Test.png" /></div>

may help.

answered Jan 22 '13 at 09:26

Nils

806
1
9
24

Pedro del Sol · Answer 4 · 2013-01-22T10:00:58.553

function Test(){
   var hNode = document.createElement('div');
   hNode.style.display = "block";
   hNode.style.overflow ="hidden";
   hNode.style.position = "absolute";
   hNode.style.width = "400px";
   hNode.style.height = "30px";
   hNode.style.border = "1px solid #666666";
   var t = document.createTextNode("Test");
   hNode.appendChild(t)
   document.body.appendChild(hNode);
 }

while all the other answers are addressing problems with your code the answer as to why it doesn't appear is you aren't actually appending the newly created div to document.body so although it exists it isn't part of the dom.

you can call this function using any of the methods described in other answers; i prefer something along the lines of

 <a href="javascript_policy.html" onclick="myFunction(); return false;">my link</a>

to direct users without javascript enabled to a page telling them why javascript is necessary for that particular link.

div is not displayed on click of image

4 Answers4