Jquery unable to assign onclick on button array

Question

I am trying to adapt the commented out code at the bottom that works for a single button to work for more than one buttons.

So I changed the 'menu-toggle' being from an id to a class. And in the html I added class='menu-toggle' to the buttons.

I am getting an array of the elements using a jquery selector. Then looping on them, and assigning the onclick event.

// Toggles the sidebar
const buttons = $('.menu-toggle');

buttons.forEach(
    function (element){
        element.onclick(
            function (event) {
                event.preventDefault();
                $("#wrapper").toggleClass("toggled");
            }
        )
    }
)

/*
$("#menu-toggle").click(function (e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});
*/

Edit: I accepted Alireza's answer, as he fixed my code. But I actually used Zoli's answer, as it is more concise. Aside from the bug in the code, the actual problem was that the browser was caching the *.js file this code is in. So my changes were not reloading. I cleared the cache from privacy settings, and now it works.

every button will do the same thing ... $("#wrapper").toggleClass("toggled"); is that the problem? that each button does exactly the same thing as that's what your code does? You haven't described what the issue is — Bravo
– Bravo, Commented Aug 5, 2021 at 7:27
buttons is a jQuery object, not an array. Does jQuery even have a forEach method? It would help if you used the live demo feature of the question editor to provide a minimal reproducible example — Quentin
– Quentin, Commented Aug 5, 2021 at 7:30
@Bravo There is a button that toggles the sidebar. But on very small screens, when the sidebar is shown, that button is occluded by sidebar. So I want to add an additional button to the sidebar itself. So yes, I want two buttons with the exact behavior. — O. Altun
– O. Altun, Commented Aug 5, 2021 at 7:30

Zoli Szabó · Accepted Answer · 2021-08-05 07:37:19Z

3

It is as simple as changing the ID selector to a class selector.

$(".menu-toggle").click(function (e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});

jQuery will attach the event handler to all selected elements, whether that's a single element (in the case of an ID selector) or multiple elements (found by a class selector or other...).

answered Aug 5, 2021 at 7:37

Zoli Szabó

4,5851 gold badge16 silver badges22 bronze badges

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

2 Comments

O. Altun Over a year ago

This was the first thing I tried and it does not work.

user6683818 Over a year ago

this should work; you might want to check and wrap it inside $(document).ready(function(){...}) if it doesnt for u

Alireza Ahmadi · Accepted Answer · 2021-08-05 08:04:55Z

0

Note that forEach functions exist on array, so you need to use spared operator (...) to convert buttons to array to make sure you can use forEach function. (Probably you get the error buttons.forEach is not a function now)

const buttons = $('.menu-toggle');
        [...buttons].forEach(
            function (element) {
                element.onclick =
                    function (event) {
                        event.preventDefault();
                        $("#wrapper").toggleClass("toggled");
                    }
            }
        )

.toggled {
            color: red;
        }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
    <button class="menu-toggle">button1</button>
    <button class="menu-toggle">button2</button>
    <button class="menu-toggle">button3</button>
    <button class="menu-toggle">button4</button>

    <p id="wrapper">this is p</p>

edited Aug 5, 2021 at 8:04

answered Aug 5, 2021 at 7:34

Alireza Ahmadi

10.2k8 gold badges28 silver badges66 bronze badges

4 Comments

Alireza Ahmadi Over a year ago

@Zargo If you check the console probably see the error buttons.forEach is not a function

O. Altun Over a year ago

Your answer does not work either. I don't see why though. I don't see an error in the console.

Alireza Ahmadi Over a year ago

@Zargo I put working snippet for you. you can see the toggled class add and removed on each click!

Alireza Ahmadi Over a year ago

I am sure you must get an error buttons.forEach is not a function if you don't get error maybe this line of your code does not called. Can you show me the more details of your code?

Tenusha Guruge · Accepted Answer · 2021-08-05 11:09:36Z

0

$("body").on("click", ".menu-toggle", function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});

edited Aug 5, 2021 at 11:09

Tenusha Guruge

2,3503 gold badges21 silver badges39 bronze badges

answered Aug 5, 2021 at 7:56

vasu nethinti

112 bronze badges

Collectives™ on Stack Overflow

Jquery unable to assign onclick on button array

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related