How to have multiple buttons calling same JavaScript

Question

I'm wondering why the first button works and the last three buttons don't in this problem I am having.

It would be great if I could get any pointers in where I am going wrong and how I can fix it.

Thanks

JS:

window.onload = function() {
  document.getElementById("LearnMoreBtn").onclick = function(){
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "block";
        popup.style.display = "block";
};

  document.getElementById("CloseBtn").onclick = function(){
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "none";
        popup.style.display = "none";      
  }
};

HTML:

<button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup">
    Popup contents here
    <button id="CloseBtn">ClosePopup</button>
</div>
<div>
some other content that will be behind the popup
</div><button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup">
    Popup contents here
     <button id="CloseBtn">ClosePopup</button>
</div>
<div>
    some other content that will be behind the popup
</div><button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup">
    Popup contents here
    <button id="CloseBtn">ClosePopup</button>
</div>
<div>
some other content that will be behind the popup
</div><button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup">
Popup contents here
<button id="CloseBtn">ClosePopup</button>
</div>
<div>
some other content that will be behind the popup
</div>

CSS:

#overlay {
display:none;    
position:fixed;  
left:0px;        
top:0px;         
width:100%;      
height:100%;     
background:#000; 
opacity:0.5;     
z-index:99999;   
}

#popup {
display:none;
position:fixed;
left:50%;        
top:50%;         
width:300px;     
height:150px;
margin-top:-75px;
margin-left:-150px;
background:#FFFFFF;
border:2px solid #000;
z-index:100000;      
}

don't use element id. instead use class

Yaje
– Yaje

2014-07-03 00:03:49 +00:00
Commented Jul 3, 2014 at 0:03 — Yaje
– Yaje, Commented Jul 3, 2014 at 0:03
IDs must be unique, CLASSes can be repeated.

showdev
– showdev

2014-07-03 00:04:46 +00:00
Commented Jul 3, 2014 at 0:04 — showdev
– showdev, Commented Jul 3, 2014 at 0:04

vcapra1 · Accepted Answer · 2014-07-03 00:10:38Z

3

The id attribute must be unique, so you can't have more than one of each id. I would recommend using the class attribute instead with getElementsByClassName instead of getElementsById.

answered Jul 3, 2014 at 0:10

vcapra1

2,0134 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

siabaJS · Accepted Answer · 2014-07-03 00:08:07Z

1

the problem is that you are using the same ID for every tag(same id for each button,div,etc.)to fix this you could use classes instead of IDs or have the event triggers in the HTML tags and add names to the js functions, like so:

html:

<button onclick="popup1()"></button>

<button onclick="popup2()"></button>

js:

function popup1() {

//add whatever you need here

}

function popup2() {

//add whatever you need here

}

answered Jul 3, 2014 at 0:08

siabaJS

3752 silver badges12 bronze badges

Comments

Nillervision · Accepted Answer · 2014-07-03 00:12:16Z

0

You cannot give your buttons (or any other elements) the same ID You can either give them unique IDs and target them individually or you can use querySelectorAll or getElementsByClassName. These methods will return a nodelist you can loop through and assign the click events.

https://developer.mozilla.org/en/docs/Web/API/Document.querySelectorAll

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

answered Jul 3, 2014 at 0:12

Nillervision

4412 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to have multiple buttons calling same JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related