Javascript: Referencing href location in HTML pop up window

I have been beating myself up for two days over this and cannot come up with a resolution. I am a web designer and rarely use JS on my own, so this could be an easy fix. The project specifications include building a web-page, using hash tags as link placeholders. I need a JS code to display the link location in a pop-up window using HTML. I have a good start and have made a lot of modifications to try and get this to work, but I need the JS to reference multiple href locations if the link is clicked.

I have a test page set up so far- it seems as though the first button works perfectly, but then when I close out the pop up window and attempt to open the second link- nothing happens. Can someone help me? (please- I am on a deadline and desperate)!

Here is what I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pop up example</title>

<link rel="stylesheet" type="text/css" href="pop-up-styles.css">


<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script> 

<script type="text/javascript"> 
    function myFunction() {
    var x = document.getElementById("myAnchor").href;
    document.getElementById("demo").innerHTML = x;
}
//-->
</script>
</head>

<body>

<div id="popup-box1" class="popup-position">
<div id="popup-wrapper">
<div id="popup-container">
<h1 id="on-top">my own pop up</h1>
<p><a id="myAnchor" href="http://www.BoxOne.com" onclick="myFunction()"></a></p>
<button id="on-top" onclick="myFunction()">Click Here for href Reference</button>
<p id="demo"></p>
<input type="reset" value="Close" onClick="toggle_visibility('popup-box1');">
</div><!--container-->
</div><!--wrapper-->
</div><!--box1-->

<div id="popup-box2" class="popup-position">
<div id="popup-wrapper">
<div id="popup-container">
<h1 id="on-top">my own pop up</h1>
<p><a id="myAnchor" href="http://www.BoxTwo.com" onclick="myFunction()"></a></p>
<button id="on-top" onclick="myFunction()">Click Here for href Reference</button>
<p id="demo"></p>
<input type="reset" value="Close" onClick="toggle_visibility('popup-box2');">
</div><!--container-->
</div><!--wrapper-->
</div><!--box1-->

<div id="wrapper">
<p><a id="myAnchor" href="#BoxOne.com" onclick="toggle_visibility('popup-box1');">Open Box 1</a>                </p>
<p><a id="myAnchor" href="#BoxTwo.com" onclick="toggle_visibility('popup-box2');">Open Box 2</a>    </p>
</div>

</body>
</html>

Solution

Your function should look like :

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block') {
       e.style.display = 'none';
   }

   else  {
       e.style.display = 'block';
   }

}

Don't forget brackets

Then you can't give to multiple elements the same ID.

I edited it a bit, but it is still far from being a well structured script. Is very basic and not flexible.

However, to give you a starting point, try to work on this :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pop up example</title>

<link rel="stylesheet" type="text/css" href="pop-up-styles.css">


<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block') {
           e.style.display = 'none';
       }

       else  {
           e.style.display = 'block';
       }

    }
</script> 

<script type="text/javascript"> 
    function myFunction(url,box) {
    document.getElementById(box).innerHTML = url;
}
//-->
</script>
</head>

<body>

<div id="popup-box1" class="popup-position">
<div id="popup-wrapper">
<div id="popup-container">
<h1 id="on-top">my own pop up</h1>
<p><a href="http://www.BoxOne.com" onclick="myFunction()"></a></p>
<button onclick="myFunction('http://www.BoxOne.com','demo#1')">Click Here for href Reference</button>
<p id="demo#1"></p>
</div><!--container-->
</div><!--wrapper-->
</div><!--box1-->

<div id="popup-box2" class="popup-position">
<div id="popup-wrapper">
<div id="popup-container">
<h1 id="on-top">my own pop up</h1>
<p><a href="http://www.BoxTwo.com" onclick="myFunction(this)"></a></p>
<button onclick="myFunction('http://www.BoxTwo.com','demo#2')">Click Here for href Reference</button>
<p id="demo#2"></p>
</div><!--container-->
</div><!--wrapper-->
</div><!--box1-->

<div id="wrapper">
<p><a id="myAnchor" href="#BoxOne.com" onclick="toggle_visibility('popup-box1');">Toggle Box 1</a>                </p>
<p><a id="myAnchor" href="#BoxTwo.com" onclick="toggle_visibility('popup-box2');">Toggle Box 2</a>    </p>
</div>

</body>
</html>

If this helped, mark it as correct so other people can see it :) Best regards