document.querySelector返回null

我在JS中使用querySelector来选择我用JS脚本填充的html标记。但是，任何时候我尝试在const questionCard中存储.card类的div时，我会得到null。document.querySelector返回null

为什么我不能选择卡？

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

来源

2017-10-12 GjoreDz

你的HTML没有第一要素在运行'build（）'之前有一个带'class'类的元素 –

它是在JS中创建的。 – GjoreDz

请参阅编辑注释 - 'questionCard'不是“动态” - 运行代码时设置值 –

你需要调用document.querySelector('.card')调用build()后。它找不到尚未存在的HTML元素。

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

来源

2017-10-12 00:06:30 Dennis

到更多正确答案的替代方案是：

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

现在

：questionCard是活HTMLCollection和questionCard[0]将与类包括card

来源

2017-10-12 00:08:51

document.querySelector返回null

回答

相关问题