javascript - document.querySelector returns null - Stack Overflow

admin管理员组

文章数量:1292160

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();

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();

• javascript

Share Improve this question Follow edited May 2, 2023 at 12:14 3limin4t0r 21.2k33 gold badges3737 silver badges5858 bronze badges asked Oct 12, 2017 at 0:03 bird_blue03bird_blue03 14711 gold badge22 silver badges99 bronze badges 5

• your html does not have an element with class card before you run build() – Jaromanda X Commented Oct 12, 2017 at 0:03
• It is created in the JS. – bird_blue03 Commented Oct 12, 2017 at 0:04
• see edited ment - questionCard is not "dynamic" - the value is set when the code is run – Jaromanda X Commented Oct 12, 2017 at 0:04
• 1 irrelevant - questionCard is null, nothing changes just because you subsequently added an element – Jaromanda X Commented Oct 12, 2017 at 0:06
• Does this answer your question? Why does jQuery or a DOM method such as getElementById not find the element? – Heretic Monkey Commented Apr 9, 2021 at 13:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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');

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

本文标签： javascriptdocumentquerySelector returns nullStack Overflow