Material Components Web - mdc attachTo only apply to the first element

Viewed 2229

I'm using Material Components Web to create a website. I have a list of button with the class .mdc-button and I activated it with the following line into my Javascript File.

window.button = new mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button'));

The problem is that this only applies to the first element with the class .mdc-button Why is that and how to fix it?

2 Answers

Here is an ES6 way of doing the same thing (for anyone else reading this post):

const buttons = document.querySelectorAll('.mdc-button');
buttons.forEach(button => MDCRipple.attachTo(button));
Related