Question 45035 in Html Question posted in
Some basic documentation can be found here.

document.getElementById() can't find any matches on page – Html

i have this html code:

import { currentSlide } from './Carusel';


<div className='app__mainpage'>
                <div className='app__mainpage_banners'>
                    <img id='app__banners-banner' src={images.banner_first} alt='Банер' />
                    <img id='app__banners-banner' src={images.banner_two} alt='Банер' />
                    <img id='app__banners-banner' src={images.banner_three} alt='Банер' />
                </div>
                <div className='app__mainpage_cigarettes'>
                    <svg className='app__cigarettes-arrow active' fill='#6C6C6C' onClick={currentSlide(1)} ... BLA-BLA-BLA boring svg code </svg>
                </div>
 </div>

and that js code:


var slideIndex = 1;
showSlides(slideIndex);

export function currentSlide(n){
  showSlides(slideIndex = n);
}

export function showSlides(n){
  var i;
  var images = document.getElementById("app__banners-banner");
  var cigarettes = document.getElementsByClassName("app__cigarettes-arrow");

  if(n > images.length){
    slideIndex = 1;
  }

  if(n < 1){
    slideIndex = slideIndex.length;
  }

  for(i = 0; i < images.length; i++){
    images[i].style.display = "none";
  }

  for(i = 0; i < cigarettes.length; i++){
    cigarettes[i].className = cigarettes[i].className.replace(" active", "");
  }

  images[slideIndex - 1].style.display = "block";
  cigarettes[slideIndex - 1].className += " active";
}

in js file i have finction called showSlides, when i click svg object onClick parameter should call showSlides function and so go on

The problem is Uncaught TypeError: can't access property "length", images is null. I am fully understand that js can’t find some object with id: app__banners-banner and so can’t fill var named images. But why? Cause that object obiously exist

I expected that var variable will be filled by object called app__banners-banner and my code gonna work

Tags:

2

Answers


  1. 0

    In general a singular function returns a single object. In this case, getElementByID returns a single element if found, and null if not. Objects don’t automatically have a "length" attribute.

    https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

    Login or Signup to reply.
  2. 0

    There’s a general rule that all id’s on the DOM should be unique. It you wanted to group elements together, then adding them to the same class would make more sense. You might want to do something like this

      <img id='app__banners-banner-1' src={images.banner_first} alt='Банер' />
  <img id='app__banners-banner-2' src={images.banner_two} alt='Банер' />
  <img id='app__banners-banner-3' src={images.banner_three} alt='Банер' />

    If you are using react you may want to do some research on useState and other hooks that could satisfy your needs. Holding your data in state and updating state on click is a more react way of doing things.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search