How can i tell the javascript in this html code not to influence all the buttons?

Question

I have created a html website with bootstrap and jquery. I wanted, that a button change his label text and his design depending on a boolean variable. That worked with javascript. But I have this button (in green and blue) all over the page. Now either all buttons appear green or all buttons appear green.

Here is an example of what I mean with two buttons:

<div class="alert alert-danger" role="alert">
                                        <center><strong></strong></center>
                                    </div>

                                    <script>
                                        var open = true;

                                        if (open) {
                                            $(".alert").addClass("alert-success");
                                            $(".alert").removeClass("alert-danger");
                                            $(".alert").html("<center><strong>Geoeffnet</strong></center>");
                                        } else {
                                            $(".alert").removeClass("alert-success");
                                            $(".alert").addClass("alert-danger");
                                            $(".alert").html("<center><strong>Geschlossen</strong></center>");
                                        };

                                    </script>


<div class="alert alert-danger" role="alert">
                                        <center><strong></strong></center>
                                    </div>

                                    <script>
                                        var open = false;

                                        if (open) {
                                            $(".alert").addClass("alert-success");
                                            $(".alert").removeClass("alert-danger");
                                            $(".alert").html("<center><strong>Geoeffnet</strong></center>");
                                        } else {
                                            $(".alert").removeClass("alert-success");
                                            $(".alert").addClass("alert-danger");
                                            $(".alert").html("<center><strong>Geschlossen</strong></center>");
                                        };

                                    </script>

How can I stop, that this two buttons always have the same features?

Thank you, you help me a lot!

Answer 1

Your problem seems to be that your code never points to a specific alert.

var open = false and var open = true just set a global variable open independent from either alert. When you call $(".alert").doSomething it goes through the DOM and applies to all elements with class alert.

One solution might be to add classes open and notOpen or something, and use those instead of alert

Answer 2

You are making the mistake of being logical, but uninformed. It is logical to assume that javascript placed after a block of HTML will apply to that block - but that's not how js works. Both blocks of js will apply to the entire web page.

You need a way to connect an event (something the user does) with a particular button. It is common to assign IDs to specific buttons so you can easily target them, but you can also use jQuery to select buttons based on proximity to other elements. IDs is easier.

Try something like this instead (very simplistic and inelegant example, for demo not for code excellence:

 var b1=true, b2=false; $('#btnOne').click(function(){ if (b1){ $("#alertOne") .addClass("alert-success") .removeClass("alert-danger") .html("<center><strong>Geoeffnet</strong></center>"); b1=false; }else{ $("#alertOne") .removeClass("alert-success") .addClass("alert-danger") .html("<center><strong>Geschlossen</strong></center>"); b1=true; } }); $('#btnTwo').click(function(){ if (b1){ $("#alertTwo") .addClass("alert-success") .removeClass("alert-danger") .html("<center><strong>Geoeffnet</strong></center>"); b1=false; }else{ $("#alertTwo") .removeClass("alert-success") .addClass("alert-danger") .html("<center><strong>Geschlossen</strong></center>"); b1=true; } }); 

 div{box-sizing:border-box;border:1px solid transparent;} .alert-success{border:1px solid red;} .alert-danger{border:1px solid limegreen;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="alertOne" class="alert alert-danger" role="alert"> <center><strong>Nothing to see</strong></center> </div> <button id="btnOne">Click Me</button> <div id="alertTwo" class="alert alert-danger" role="alert"> <center><strong>Nothing to see</strong></center> </div> <button id="btnTwo">Click Me</button>