Setting width for added 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 btw structure;)). It’s good to know that although I can build things with jQuery, I have very little understanding of what is really happening under the hood.

Anyway, here is my problem. I am trying to set the width of the image that I added to the list item. For some reason, the code I wrote does not affect the width property of the image. I updated css as a health check and it worked fine, so this should be a js issue.

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 css and html are needed. I just try not to make the message too long.

Answer 1

querySelectorAll returns a NodeList collection that does not have a style property.

If you want to change the style of each item in this collection, you need to iterate.

For example, using [].forEach :

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

Note, assigning something to the style property is bad practice. In some browsers, style is implemented as an accessor property with a getter, but there is no setter, so assignment to it will be ignored in non-strict mode or in strict mode. In other browsers, it will replace all inline styles. Instead, assign style.width . Or, if you really want to get rid of previous built-in styles, before 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 for a NodeList , but since this is a list, you cannot set the 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; 

To iterate through visableImages and set all their styles.