Console says element is "null"

Question

I've started to create some kind of image slider but right at the beggining i've reached a problem

Console says that my img1 and others are "null"..

Where's my mistake ?

let img1 = document.querySelector('.images_first active');
let img2 = document.querySelector(".images_second");
let img3 = document.querySelector(".images_third");

const fw = document.querySelector(".test-button_forward");
const back = document.querySelector(".test-button_backwards");

let clicks = 0;
console.log(img1);


fw.addEventListener('click', function()
 {
  img1.classList.remove('active');
  img2.classlist.add("active");

  clicks++;

});

Full version is here

They probably don't exist yet. – SLaks Sep 25 '17 at 21:13 — SLaks, Sep 25 '17 at 21:13
It should be `.images_first.active` – Turnip Sep 25 '17 at 21:13 — Turnip, Sep 25 '17 at 21:13

score 1 · Answer 1 · answered Sep 25 '17 at 21:13

1

let img1 = document.querySelector('.images_first.active');

answered Sep 25 '17 at 21:13

Lucas_Santos

4,478
16
65
113

score 1 · Accepted Answer · answered Sep 25 '17 at 21:14

1

Your selector is incorrect. .images_first active would select an element with tag name active that is a descendant of an element with class images_first. I.e. it would find the inner element in this example:

<div class="images_first">
  <active></active>
</div>

However, what you actually seem to want is to find the element that has both classes, images_first and active. This is written as

.images_first.active

Learn more about CSS selectors on MDN.

Related: Why does jQuery or a DOM method such as getElementById not find the element?

answered Sep 25 '17 at 21:14

Felix Kling

705,106
160
1,004
1,072

Thank you,but right now it says that img2 is not defined.I mean when you click forward it can't add a class into this element because it's "undefined" – Matt Sep 25 '17 at 21:21
@Matt: No, the errors says that it cannot access property `add` on `undefined`. That's because you have a typo in `img2.classlist`. The `l` of `list` should be capitalized: `img2.classList`, just like in the previous line. `img2` itself is defined. – Felix Kling Sep 25 '17 at 21:25

Console says element is "null"

2 Answers2