Javascript code is not applying to all the css classes except the first one

Question

here are three wrapper class but my javascript code is only applying to the first one, i want before and after effect in my image but only first image is responding to that

This is my code

 let active = false; document.querySelector('.scroller').addEventListener('mousedown', function () { active = true; document.querySelector('.scroller').classList.add('scrolling'); }); document.body.addEventListener('mouseup', function () { active = false; document.querySelector('.scroller').classList.remove('scrolling'); }); document.body.addEventListener('mouseleave', function () { active = false; document.querySelector('.scroller').classList.remove('scrolling'); }); document.body.addEventListener('mousemove', function (e) { if (!active) return; let x = e.pageX; x -= document.querySelector('.wrapper').getBoundingClientRect().left; scrollIt(x); }); function scrollIt(x) { let transform = Math.max(0, Math.min(x, document.querySelector('.wrapper').offsetWidth)); document.querySelector('.after').style.width = transform + "px"; document.querySelector('.scroller').style.left = transform - 25 + "px"; } scrollIt(150); document.querySelector('.scroller').addEventListener('touchstart', function () { active = true; document.querySelector('.scroller').classList.add('scrolling'); }); document.body.addEventListener('touchend', function () { active = false; document.querySelector('.scroller').classList.remove('scrolling'); }); document.body.addEventListener('touchcancel', function () { active = false; document.querySelector('.scroller').classList.remove('scrolling'); });

 <!DOCTYPE html><html lang='en' class=''> <head> <link rel="stylesheet" href="style.css"> </head><body> <div class="wrapper"> <div class="before"> <img class="content-image" src="https://farm2.staticflickr.com/1638/26145024230_06acd55d1b_b.jpg" draggable="false"/> </div> <div class="after"> <img class="content-image" src="https://farm2.staticflickr.com/1663/25814974803_d4c55ff708_b.jpg" draggable="false"/> </div> <div class="scroller"> <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg> </div> </div> <div class="wrapper"> <div class="before"> <img class="content-image" src="https://farm2.staticflickr.com/1638/26145024230_06acd55d1b_b.jpg" draggable="false"/> </div> <div class="after"> <img class="content-image" src="https://farm2.staticflickr.com/1663/25814974803_d4c55ff708_b.jpg" draggable="false"/> </div> <div class="scroller"> <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg> </div> </div> <div class="wrapper"> <div class="before"> <img class="content-image" src="https://farm2.staticflickr.com/1638/26145024230_06acd55d1b_b.jpg" draggable="false"/> </div> <div class="after"> <img class="content-image" src="https://farm2.staticflickr.com/1663/25814974803_d4c55ff708_b.jpg" draggable="false"/> </div> <div class="scroller"> <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg> </div> </div> </body></html>

i expected it to apply to all the classes but it only applies to the first one, i tried doing getElementByClassName but it is not working.

Answer 1

The document.querySelector function only return one element, if you want to return multiple elements with a CSS selector, you can use document.querySelectorAll then use a loop to modify each element.

Example:

let elements = document.querySelectorAll('.class');

for(let e=0; e<elements.length; e++) {
  elements[e].classList.remove('classToRemove');
}

Javascript code is not applying to all the css classes except the first one

Question

1 answers

solution1
0 2019-01-15 09:50:02

Javascript code is not applying to all the css classes except the first one

Question

1 answers

solution1 0 2019-01-15 09:50:02

solution1
0 2019-01-15 09:50:02