document.querySelector returns null

Question

I use the querySelector in JS to select html markup that I filled in with a JS script. However, anytime I try to store the divs with a class of .card in the const questionCard, I get null.

Why can't I select the cards?

HTML:

<div class='card-container'></div>

JS:

const questionBlock = document.querySelector('.card-container');
const questionCard = document.querySelector('.card');

function build() {
    let output = [];

    ...some unimportant code here...

      output.push(
        `
          <div class='card'>
            <div class='question'>${current.question}</div>
            <div class='answers'>${answers.join('')}</div>
          </div>
        `
      );
    })

    questionBlock.innerHTML = output;
}

build();

your html does not have an element with class `card` before you run `build()` — Jaromanda X, Oct 12 '17 at 00:03
see edited comment - `questionCard` is not "dynamic" - the value is set when the code is run — Jaromanda X, Oct 12 '17 at 00:04
irrelevant - `questionCard` is null, nothing changes just because you subsequently added an element — Jaromanda X, Oct 12 '17 at 00:06
Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Heretic Monkey, Apr 09 '21 at 13:39

score 3 · Accepted Answer · answered Oct 12 '17 at 00:06

You need to call document.querySelector('.card') after calling build(). It cannot find HTML elements that do not exist yet.

const questionBlock = document.querySelector('.card-container');

function build() {
    let output = [];

    ...some unimportant code here...

      output.push(
        `
          <div class='card'>
            <div class='question'>${current.question}</div>
            <div class='answers'>${answers.join('')}</div>
          </div>
        `
      );
    })

    questionBlock.innerHTML = output;
}

build();

const questionCard = document.querySelector('.card');

score 1 · Answer 2 · answered Oct 12 '17 at 00:08

1

An alternative to the more correct answers is:

const questionCard = document.getElementsByClassName('card');

now: questionCard is a live HTMLCollection, and questionCard[0] will be the first element with class including card

answered Oct 12 '17 at 00:08

Jaromanda X

47,382
4
58
76

document.querySelector returns null

2 Answers2