This question has already been answered:

Actually the question itself: why when I write code on getElementById works, but does not work with getElementsByclassName ??

This is a working code.

 var img = document.getElementById('images'); var imagesArray = ["img/flower1.jpg", "img/flower2.jpg", "img/flower3.jpg", "img/flower5.jpg", "img/flower6.jpg"]; var index = 0; function changeimg(){ img.setAttribute("src" ,imagesArray[index]); imdex++; if (imdex >= imagesArray.length) { imdex = 0; } } setInterval(changeimg, 5000);

This is not a working code.

 var img = document.getElementsByClassName('images'); var imagesArray = ["img/flower1.jpg", "img/flower2.jpg", "img/flower3.jpg", "img/flower5.jpg", "img/flower6.jpg"]; var index = 0; function changeimg(){ img.setAttribute("src" ,imagesArray[index]); imdex++; if (imdex >= imagesArray.length) { imdex = 0; } } setInterval(changeimg, 5000);

Reported as a duplicate by Yuri , vp_arth , Grundy javascript Mar 10 '17 at 8:38 pm

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • Try img[imdex].src = ... - vp_arth

3 answers 3

getElementsById is one element, and getElementsByClassName is a live collection of elements. In general, where indicated, getElements is a live collection with elements.

And to access an element by getElementsByClassName you need to specify the index of the element to which you want to refer. And if you want to all elements with a given class, then you need to create a loop:

Example:

 var elem = document.getElementsByClassName('class'); for(var i = 0; i < elem.length; i++){ elem[i].innerHTML = 'Код' };

You can also access through new functions: querySelector and querySelectorAll

document.querySelector('query selector') is the first element with this selector.
document.querySelectorAll('query selector') - all elements with the given selector (collection of elements. It is necessary to address through an index).

What is remarkable about this function is that you can use the same selectors in it as in CSS . That is, you can refer to the elements by the attribute - [атрибут="его значение"] , by the class .element , by ID - #elem and by all other query selectors.

  • This is not an array. This is another collection, and alive. - Qwertiy ♦
  • @Qwertiy, not everyone will understand what a live collection is - Yuri
  • This is not a reason to call her inadvertently. For example, in my answer I simply said “collection” without additional clarification. But if you want to paint, then you can and more. - Qwertiy ♦
  • one
    @Qwertiy, oh everything :) - Yuri
  • @Qwertiy, edited by - Yuri
 getElementById getElementsByClassName ^

The second returns a collection of items, not 1 item, as the first.

    Because it does not work, getElementById returns one element, and getElementsByClassName returns an array of elements.

    To get the first item try writing this:

     var img = document.getElementsByClassName('images')[0];

    Literature:

    MDN: document.getElementsByClassName ()

    MDN: document.getElementById ()