似乎无法使用.innerHTML将文本添加到H1标记

Question

I've tried everything on this website, on every website, but for some odd reason, I can't seem to add text to an h1 tag. I've done this a million times before no issues but now it doesn't seem to work no matter what I do. The onClick functions work perfectly fine tho, so I know the function is being ran.

    const true1 = document.getElementsByClassName('True')
    const false1 = document.getElementsByClassName('False')
    const next = document.getElementsByClassName('next')
    const questione = document.getElementById('QuestionE')


function questionOne(){
      questione.innerHTML = "hello";

        true1[0].addEventListener('click', ((() => function aClickEvent(){
            true1[0].classList.toggle('TrueH')
             next[0].classList.toggle('nextS')
             }))(), false);

             false1[0].addEventListener('click', ((() => function aClickEvent(){
             false1[0].classList.toggle('FalseH')
             next[0].classList.toggle('nextS')
            }))(), false);

    }

   window.addEventListener('load', questionOne(), false);

Answer 1

window.addEventListener('load', questionOne(), false);

this is calling questionOne which returns nothing so you function is executing imediately before the DOM is there and you are attaching undefined as the function to call on load.

Try

window.addEventListener('load', questionOne, false);

Without the calling parenthesis.

Answer 2

Looks like you're trying to write immediately invoked function expressions, ie

(function blah(){})()

is this what you mean to do? You have click listeners, so maybe you meant something like this:

function questionOne() {
  questione.innerHTML = "hello";

  true1[0].addEventListener('click', () => {
    true1[0].classList.toggle('TrueH')
    next[0].classList.toggle('nextS')
  }, false);

  false1[0].addEventListener('click', () => {
    false1[0].classList.toggle('FalseH')
    next[0].classList.toggle('nextS')
  }, false);

}

btw 'hello' appears in my test...

Answer 3

This snippet works so I am assuming that you have incorrectly spelled QuestionE in the id as I cannot see your markup or the

const questione = document.getElementById('QuestionE')

runs before The element exists in the DOM. Try putting the line in the function or console.log(questione) and see if it has a value.

 const questione = document.getElementById('QuestionE') function questionOne(){ questione.innerHTML = "hello"; } window.addEventListener('load', questionOne, false); 

 <div id="QuestionE"></div>