javascript - 如何修复 : TypeError: document. querySelector(...) 为空

Question

当我执行这段代码时，它不起作用。它正在返回:

TypeError: document.querySelector(...) is null.

但是，当我直接从函数内部使用字符串参数时，它就可以工作。

我尝试在函数参数中将参数传递给 queryselector，但失败了。

window.onload = changeText('lap0015', 'General Physics I')

function changeText(subject) {
  document.querySelector(`#${subject} > .name`).innerHTML = `${name}`
  console.log('OK!')
}

<div id="lap0015" class="subject">
  <p class="code"></p>
  <p class="name"></p>
  <p class="theory"></p>
  <p class="practice"></p>
  <p class="totalHourLoad"></p>
</div>


// **After** some tries, I changed my script to jQuery:

const name = 'Física Geral I'
const code = 'lap0015'

$(document).ready(getText)

function getText() {
$(`#${code} > p.code`).text(`${code}`)
$(`#${code} > p.name`).text(`${name}`)
}

当 .ready(getText 'here') 中没有括号时，如何以编程方式将参数传递给 getText ？

实际结果就是上面给出的错误。预期结果应该是这样的:

print

Answer 1

我无法重现您的错误，但我已经让您的代码正常运行。我只需将缺少的 name 参数添加到 changeText 函数中。

window.onload = changeText('lap0015', 'General Physics I')

function changeText(subject, name) {
  document.querySelector(`#${subject} > .name`).innerHTML = `${name}`
  console.log('OK!')
}

<div id="lap0015" class="subject">
  <p class="code"></p>
  <p class="name"></p>
  <p class="theory"></p>
  <p class="practice"></p>
  <p class="totalHourLoad"></p>
</div>