Value from JavaScript object returns null

Question

I am learning JavaScript objects and have set myself a little project to create a slider. Its worth noting I coming from a jQuery background so my problem may lie with the way I trying to select the elements. I have the following HTML:

<div class="slider-viewport" id="mySlider">
    <div class="slides-container">
        <div class="slide">1</div>

        <div class="slide">2</div>

        <div class="slide">3</div>
    </div>
</div>

and the following JavaScript:

(function(window, document, undefined){

    // code that should be taken care of right away

    window.onload = init;

    function init(){
        // the code to be called when the dom has loaded

        var slider = {
            sliderViewport: document.getElementById('mySlider'),
            slidesContainer: document.querySelectorAll(this.sliderViewport + ' .slides-container')
        };

        console.dir(slider.sliderViewport + ' .slides-container');
        console.dir(slider.slidesContainer);

        //Just testing to see if I can do something
        slider.slidesContainer.style.color = 'blue';
    }

})(window, document, undefined);

When I view Chrome Dev Tools I get the following:

[object HTMLDivElement] .slides-container
objects.js:16 NodeList[0]
objects.js:18 Uncaught TypeError: Cannot set property 'color' of undefined

The first console.dir seems to return the element I am after. I'm not sure what the second console.dir is returning and also why I get an error of undefined. Please can you give me a steer on where I am going wrong?

Many thanks in advance.

slider.slidesContainer[0].style.color . slidesContainer is a NodeList, not node — Alex
– Alex, Commented Jan 20, 2015 at 12:17
@degr I can't see what is so funny here. You may be a javascript guru to laught at this, but your 73 rep points didn't say that. — DontVoteMeDown
– DontVoteMeDown, Commented Jan 20, 2015 at 12:24

DontVoteMeDown · Accepted Answer · 2015-01-20 12:30:23Z

1

querySelectorAll() expects a string as parameter to evaluate as a CSS selector. You can't concat a HtmlDivElement with a string, this is your first problem. The second one is that the querySelectorAll() returns a NodeList as you can see on the console. The problem is that the list is empty.

You may want to try this:

var slider = {
    sliderViewport: document.getElementById('mySlider')
}

slider.slidesContainer: slider.sliderViewport.querySelectorAll('.slides-container');

I didn't tested it, but it should works as described here.

edited Jan 20, 2015 at 12:30

answered Jan 20, 2015 at 12:20

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kirill Pisarev · Accepted Answer · 2015-01-20 12:16:48Z

1

querySelectorAll and querySelector gets a string parameter (css selector):

var slider = {
            sliderViewport: document.querySelector('#mySlider'),
            slidesContainer: document.querySelector('#mySlider .slides-container')
        };

answered Jan 20, 2015 at 12:16

Kirill Pisarev

8434 silver badges11 bronze badges

Collectives™ on Stack Overflow

Value from JavaScript object returns null

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related