Setting Width to Appended Child Image - VANILLA javascript

Question

I built an image slider with jQuery and thought it would be a good exercise to do the same in vanilla javascript (Which is an awesome framework btw ;) ). It's good to know that though I can build things with jQuery, I have very little understanding of what's actually going on under the hood.

Anyways, here is my problem. I am trying to set the width of an image that I had appended to a list element. For some reason, the code I have written is not affecting the width property of the image. I updated the css as a sanity check and it worked fine, so it must be an issue with the js.

Here is the code:

console.log('Yeh, bitch!  Programming!');

function slider() {
var settings = {
    width: "700px"
}; // end settings object

var sliderImages = document.getElementById('slider-images').querySelectorAll('img'),
    prevImg = document.getElementById('prev-img'),
    currentImg = document.getElementById('current-img'),
    nextImg = document.getElementById('next-img'),
    wrapperInner = document.getElementById('img-wrapper-inner'),
    imgList = [],
    imgAttr;

for (var i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
};
function grabImages() {
    var DOM_img;
    for (var i = 0; i < sliderImages.length; i++) {
        imgSrc = sliderImages[i].getAttribute('src');

        DOM_img = document.createElement('img');
        DOM_img.src = imgSrc;
        imgList.push(DOM_img);
        console.log(imgList[i]);
    }; // end for

    prevImg.appendChild(imgList[imgList.length -1]);
    currentImg.appendChild(imgList[0]);
    nextImg.appendChild(imgList[1]);

}; // end grabImages
grabImages();

var visibleImages = wrapperInner.querySelectorAll('ul li img');
visibleImages.style = 'width: ' + settings.width;

};// end slider
slider();

Let me know if you need the css and html. I'm just trying not to make the post too long.

Answer 1

querySelectorAll returns a NodeList collection, which has no style property.

If you want to change the style of every element in that collection, you have to iterate it.

For example, with [].forEach:

[].forEach.call(visibleImages, function(element) {
  element.style.width = settings.width;
});

Note assigning something to the style property is a bad practice. On some browsers style is implemented as an accessor property with a getter but no setter, so assigning to it will be ignored in non-strict mode or throw in strict-mode. On other browsers, it will replace all the inline styles. Instead, better assign to style.width. Or, if you really want to get rid of previous inline styles, to style.cssText.

Answer 2

Your problem is here:

var visibleImages = wrapperInner.querySelectorAll('ul li img');
visibleImages.style = 'width: ' + settings.width;

You are trying to set the style property of a NodeList but since it is a list, you can't set a property!

Change it to:

var visibleImages = wrapperInner.querySelectorAll('ul li img');
for (var i = 0; i < visibleImages.length; i++)
    visibleImages[i].style = 'width: ' + settings.width;

In order to iterate through visableImages and set all their styles.