0

I've tried changing a style using JS.

The first method is JQuery, it did work. N.B. I have multiple .slider__content divs.

$(window).scroll(function() {
    var wScroll = $(this).scrollTop();

    $('.slider__content').css({
      'transform' : 'translate(0px, -'+ wScroll /2 +'%)'
    });
});

But this second syntax returns 'slideBG.style is undefined' on the browser console.

$(document).ready(function() {
    .
    .
    .
    window.addEventListener('scroll', function() {
        var wScroll = this.pageYOffset;
        var slideBG = document.querySelectorAll('.slider__content');
        slideBG.style["transform"] = 'translateY(' + window.pageXOffset /2 + "%)";
    });
});

Why does this happen?

sai
  • 31
  • 7
  • 3
    Because slideBG is a collection. If there is only one, use `document.querySelector('.slider__content');` else you need to loop – mplungjan Jun 07 '18 at 11:47
  • Have you tried a `console.log(slideBG)` to see why that might be? Please see the [**querySelectorAll documentation**](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) for the return type and example on how to iterate over it. – Nope Jun 07 '18 at 11:48
  • @mplungjan Yes, I have multiple `.slider__content` divs. – sai Jun 07 '18 at 11:49
  • `var slideBG = document.querySelectorAll('.slider__content'); for (var i=0;i – mplungjan Jun 07 '18 at 11:50
  • Also note this: https://stackoverflow.com/questions/28163033/when-is-nodelist-live-and-when-is-it-static?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa – mplungjan Jun 07 '18 at 11:52
  • @mplungjan Thanks, that stopped the error message! – sai Jun 07 '18 at 11:58

0 Answers0