I have multiple buttons having same element id, But when I click on first button, the pop-up is ing. If I click on any other buttons pop-up will not e. 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">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">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>

I have multiple buttons having same element id, But when I click on first button, the pop-up is ing. If I click on any other buttons pop-up will not e. 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.">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.">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>

• javascript
• html

• 4 the spec does not allow same id not multiple elements – Nitro.de Commented Jul 11, 2018 at 13:47
• You can't IDs must be unique per document stackoverflow./questions/5611963/… – t3__rry Commented Jul 11, 2018 at 13:48
• I did not understand @Nitro.de – Prajna Hegde Commented Jul 11, 2018 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 Commented Jul 11, 2018 at 13:49
• 1 @PrajnaHegde use class="modalbutton" and then bind getElementsByClassName("modalbutton") for example – Nitro.de Commented Jul 11, 2018 at 13:51

3 Answers 3

You should have unique ids for your HTML elements. In order you achieve that you want the mon 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.

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:

1. Use the class name and assign the event through the loop
2. Use different IDs
3. 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.

It is not remended 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./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');
      });
});

*