2

I have removed a few pieces of code to pinpoint where it is and what is behind it in the div "wrapper". There are more div's designed to display other stuff, but they don't have the class name of "changeimage".

<div id="wrapper">
        <div id="content">
            <div align="center" id="imagesbar">
            <img class="changeimage" src="image1.jpg"/>
            </div>
            <div align="center" id="imagestext">
                <h1 class="headertext"><strong>What we do.</strong></h1>
                <br /><p class="circle" >Mowing</p>
                <p class="circle">Lawn Care</p>
                <p class="circle">Weed Removing</p>
            </div>
        </div>
    </div>

And the JavaScript:

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg', 'image6.jpg', 'image7.jpg'];
var interval = setInterval(changeImage, 4000);
var index = 0;

function changeImage(){
    //alert("changing image")
    document.getElementsByClassName("changeimage").src = images[index];
    index++;
}

In the line "document.getElementsByClassName("changeimage")" is the one with the code that has the error. It seems that the browser I'm using (which is Chrome) cannot find the class name "changeimage". I would like to change the src tag on the HTML entry img with the class name of "changeimage" to be different locations in the string array in the JavaScript depending on the index.

Grant Miller
  • 27,532
  • 16
  • 147
  • 165
Rickasheye Twopointo
  • 31
  • 5
  • 1
    `document.getElementsByClassName()` returns an array containing all occurrences since a class and can be assigned to multiple elements you either add `[0]` to get the first and only element in the array or use an id instead. – Rainbow Jun 05 '18 at 01:04
  • yea but the index is supposed to change and its supposed to change the image tag every 4000 milliseconds which would allow it to swap the image depending on whats inside the array it still doesnt work with [1] or [5] – Rickasheye Twopointo Jun 05 '18 at 01:09

1 Answers1

5

Since document.getElementsByClassName returns an element array, you need to refer to the 0th element. Also, the index must be reset to avoid reading beyond the length of the array

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg', 'image6.jpg', 'image7.jpg'];
var interval = setInterval(changeImage, 4000);
var index = 0;

function changeImage(){
    //alert("changing image")
    document.getElementsByClassName("changeimage")[0].src = images[index]; // assuming only one classname
    index++;
    if(index >= images.length) {
       index = 0;
    }
}
Ajanth
  • 2,435
  • 3
  • 20
  • 23
  • 1
    In case a conversion from nodelist to array is required then please follow [this](https://stackoverflow.com/q/7459704/465053) link. – RBT Jun 05 '18 at 05:02
  • Correction: document.getElementsByClassName returns an array-like object, aka nodeList, not an array itself. You can access the nodes by bracket notation like an array and you can use .length property, but that's where pretty much the similarities end with an array. – Mishel Tanvir Habib Dec 24 '19 at 18:33