element.querySelector(".exampleClass") is not a function

Question

I am trying to build a responsive carousel and am getting an error in the following code. I've tried using JQuery, other selection methods but they all return the same error.

I try to select the element here, first my accessing its parent element

     var carousel = $('#carousel');
     var container = carousel.querySelector('.carousel-container');

The about code returns and ERROR that carousel.querySelector is not a function.

Which creates a problem, and also screws up the resizing function below:

  function slideTo(index){
      index = index < 0 ? totalItems -1 : index >= totalItems ? 0 : index;
      container.style = container.style.transform = 'translate(-' + (index * percent) + '%, 0)';
       currentIndex = index;
   }

Container.style in the third line of the function returns an ERROR that I cannot set a property on container.style as it is "undefined"

I REALLY just need to be able to add the CSS "transform : translate" property to the container element.

I am at a loss for things to try... would really appreciate some feedback!

Answer 1

querySelector is a native JS method, and carousel is a jQuery object. If you are using jQuery, there is no reason to be using queryselector.

jQuery

var carousel = $('#carousel'); //jQuery object
var container = carousel.find('.carousel-container'); //jquery object of carousel-container

DOM

var domCarousel=carousel.find('.carousel-container')[0];

which is roughly equivalent to

domCarousel=document.getElementById('carousel').querySelector('.carousel-container');