How to fix: TypeError: document.querySelector(...) is null

Question

When I execute this piece of code, it doesn't work. It is returning:

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

But, when I use the string arguments directly from the inside the function, it works.

I have tried and failed to pass arguments to queryselector in function parameters.

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}`)
}

How do I programmatically pass arguments to getText, when there's no parenthesis in .ready(getText 'here')?

The actual result of this is the error given above. Expected result should be as this:

print

Answer 1

Try this:

$(document).ready(() => getText('lap0015', 'General Physics I'));

Or (If you need to support IE):

$(document).ready(function() { getText('lap0015', 'General Physics I'); });