JavaScript弹出框

Question

I created a pop up box on my site.

I added the pop up box to 3 separate buttons and for some reason the pop up will only work for the first button.

I deleted the id tag: id="myBtn" on the first button and then the pop up worked on my second button but still wouldn't work on my third button

On the pop up box, I would also like to have a link to direct the user to the contact form and when the user clicks on the link the pop up window should close.

here is the javascript code:

var modal = document.getElementById('myModal');

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
}

span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Here is the html code:

<footer class="panel-footer"><div class="btn btn-block btn-lg btn-default"><button id="myBtn">Sign up now</button>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2><img src="http://localhost:8383/homepage/img/logo.png" style="width:250px"></h2>
</div>
<div class="modal-body">
<p>Please contact us via the <a href="#">contact form</a> as our sign up system is currently under construction</p>
<p>Sorry for any inconvenience &nbsp; :) </p>
</div>
<div class="modal-footer">
<h3 align="center">SUPP Software LTD.</h3>
</div>
</div>
</div>
</div></footer>

Answer 1

You have same ID on all buttons. document.getElementById always returns only one element. ID has to be unique. Change it to the class and bind event to every element returned by document.getElementsByClassName

Answer 2

If you're giving all your buttons an id of myBtn then it would make sense that it fails because you are setting btn = document.getElementById('myBtn') which is finding the first element with an id of myBtn . Do what Eduard said 1. use a class since the elements are not unique and 2. retrieve all the elements instead of just one using document.getElementsByClassName .

Answer 3

Example 1 :

with Class name,

  <html> <head> <title></title> </head> <body> <button class="b">Button1</button> <button class="b">Button2</button> <button class="b">Button3</button> <script> var btn = document.getElementsByClassName("b")[0]; btn.addEventListener("click",function(){ alert("Button1"); }) var btn = document.getElementsByClassName("b")[1]; btn.addEventListener("click",function(){ alert("Button2"); }) var btn = document.getElementsByClassName("b")[2]; btn.addEventListener("click",function(){ alert("Button3"); }) </script> </body> </html> 

Example 2 :

with Id,

  <html> <head> <title></title> </head> <body> <button id="btn1">Button1</button> <button id="btn2">Button2</button> <button id="btn3">Button3</button> <script> var btn = document.getElementById("btn1"); btn.addEventListener("click",function(){ alert("Button1"); }) var btn = document.getElementById("btn2"); btn.addEventListener("click",function(){ alert("Button2"); }) var btn = document.getElementById("btn3"); btn.addEventListener("click",function(){ alert("Button3"); }) </script> </body> </html>