How to have multiple buttons of same id value and when click on any button the pop-up should come?

Question

I have multiple buttons having same element id, But when I click on first button, the pop-up is coming. If I click on any other buttons pop-up will not come. How can I make it possible.

<form method="post" action="trial.php">

<!-- Trigger/Open The Modal -->
<input type="button" id="myBtn" value="assign"></input>
<input type="button" id="myBtn" value="asd"></input>
<input type="button" id="myBtn" value="assign"></input>
<input type="button" id="myBtn" value="assign"></input>
<input type="button" id="myBtn" value="assign"></input>

<!-- The Modal -->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Assign Project</p>
        <hr style="height:0.25px; background:black;"></hr>
        <div class="container">
          <div class="row">
              <p class="col-md-10"><br/>Assign Project to a Existing Team : 
              <a class="btn btn-primary" id="ExistingTeam" value="Existing Team" href="google.com">Existing Team</a></p>
          </div>
          <div class="row">
              <p class="col-md-10"><br/>Create a new Team and Assign Project : 
              <a class="btn btn-primary" id="CreateTeam" value="Create Team" href="google.com">Create Team</a></p>  
          </div>
        </div>
    </div>
</div>
</form>

These is the javascript I am using for pop-up

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

You can't `ID`s must be unique per document https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme — t3__rry, Jul 11 '18 at 13:48
`id="myBtn"` can exists only once, thats what the html spec says. if you have the same id multiple times nobody know what will happen, depending on browser — Nitro.de, Jul 11 '18 at 13:49
If you want many components with same identification, you should use class. Id must be unique — Jorgedl, Jul 11 '18 at 13:49
@PrajnaHegde use `class="modalbutton"` and then bind `getElementsByClassName("modalbutton")` for example — Nitro.de, Jul 11 '18 at 13:51
https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp — Ben Morris, Jul 11 '18 at 13:52
it's not the only thing to make it work, look at @UlasHunka 's answer — Isaac Abramowitz, Jul 11 '18 at 13:57

Christos · Answer 1 · 2018-07-11T14:01:01.807

You should have unique ids for your HTML elements. In order you achieve that you want the common practice is to use a pseudo css class prefixed with js, in order for this to be evident to the readers of your code that this class is used in js script.

var buttons = document.getElementsByClassName('jsBtn');
for(var i=0; i<buttons.length; i++){
    buttons[i].addEventListener("click", function(){ console.log("Hello"); })
}

<input type="button" id="btn1" class="jsBtn" value="button1"/>
<input type="button" id="btn2" class="jsBtn" value="button2"/>

A better approach it would be to place all the buttons in a div and assign the pseudo css class to this div.

var btnContainer = document.getElementsByClassName("jsBtnContainer");
btnContainer[0].addEventListener("click", function() { console.log("Hello"); });

<div class="jsBtnContainer">
    <input type="button" id="btn1" class="jsBtn" value="button1"/>
    <input type="button" id="btn2" class="jsBtn" value="button2"/>
</div>

Doing so, you would have only one event listener instead of n listeners, where n is the number of buttons in your document. Fewer listeners means better performance on the loading of the page, since fewer listeners would have to be registered.

The above technique is called DOM Event Delegation.

score 3 · Answer 2 · answered Jul 11 '18 at 13:52

When you assign the same ID to more than one element this scenario happens. Actually when you try to call the element using id code only calls the first element.

So to remove this error there are multiple solutions:

Use the class name and assign the event through the loop
Use different IDs
Access the elements using the tag and check whether its id is the id assigned by you.

This page has mentioned everything which you require to get over your problem.

score 0 · Answer 3 · answered Jul 11 '18 at 14:07

It is not recommended to use same id for multiple elements. Replace id with class attribute. I have done a sample code that will give you a brief idea on coding part. Kindly check.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Learn Javascript</title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    </head>
    <body>
        <form action="">
            <input type="button" value="button 1" class="myBtn">
            <input type="button" value="button 2" class="myBtn">
        </form>
    </body>
    </html>
   jQuery(document).ready(function(){
      jQuery('.myBtn').on('click', function(){
            alert('You have clicked');
      });
});

*

How to have multiple buttons of same id value and when click on any button the pop-up should come?

3 Answers3