CODEWITHSUNDEEP
javascriptjqueryhtml
Andreas Hunter
Andreas Hunter

Reputation: 5004

How to change many buttons class with one id on click to it?

I'll display friend requests by looping where have button to accept friend request with one id.

HTML code:

foreach($friendRequests as $request) {
    <div class="alert alert-warning" role="alert">
      {{$request['userName']}} send to you friend request. 
      <button type="button" class="btn btn-warning pull-right" value="{{ $request->senderId }}" id="accept">Accept</button>
    </div>  
}

Here on looping will be displayed 6 friend requests with accept buttons.

Javascript code:

var accept = document.querySelector('#accept');

$(accept).on('click', function() {
    if(accept.classList.contains("btn-warning") == true) {
        accept.classList.remove("btn-warning");
        accept.classList.add("btn-success");
    } else if (accept.classList.contains("btn-success") == true) {
        accept.classList.remove("btn-success");
        accept.classList.add("btn-warning");
    }
});

When I click to first friend request all works good but other buttons not works. How can I use my code correctly to each buttons?

Upvotes: 0

Views: 92

Answers (2)

Hikmat G.
Hikmat G.

Reputation: 2621

Use class because ids are for uniqueness. And you have jquery included why not use it.

$(document).on('click','.accept', function(){
    if(this.classList.contains("btn-warning") == true) {
        this.classList.remove("btn-warning");
        this.classList.add("btn-success");
    } else if (this.classList.contains("btn-success") == true) {
        this.classList.remove("btn-success");
        this.classList.add("btn-warning");
    }
});

Upvotes: 3

Nikola
Nikola

Reputation: 512

ID's should be unique. No two elements should have the same ID.

var accept = document.querySelector('#accept');

The querySelector only returns the first element it finds, what you want to use is document.querySelectorAll('.accept-button');

Upvotes: 1

Related Questions