In the previous video we added JavaScript to let our modal appear and disappear after a “click” event. Unfortunately, using the “querySelector” to open the modal only works for a single element. Time to find out how to select multiple elements of the same class with “querySelectorAll” and also how to use loops and “addEventListener” on our page.

———-

Join our JavaScript Bootcamp: https://www.udemy.com/javascript-bootcamp-2016/learn/v4/?couponCode=ACAD_M

Starting Code: https://github.com/academind/web-development-beginners-guide/tree/13.01-js-modal-queryall-starting-code
Finished Code: https://github.com/academind/web-development-beginners-guide/tree/13.02-js-modal-queryall-finished-code

Want to learn something totally different? Check out all other courses: https://academind.com/learn/our-courses

———-

• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.(https://www.facebook.com/academindchannel/)
• Or visit our Website (https://www.academind.com) and subscribe to our newsletter!

See you in the videos!

———-

Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

Original source