0

I have this js script:

<script>
  var checking_for_user = <%- JSON.stringify(overwrite) %> ;
  if (checking_for_user) {
   console.log('I reached here.');
   document.querySelector('.msg .text-center').innerHTML='User does not exist! Please go back to the <a href="/index">Index Page</a>';
  }
</script>

And below the script, i have this HTML code:

<div class="msg">
  <h1 class="text-center">
    There was an error. Please go back to the <a href="/index">Index Page</a>
  </h1>
</div>

The checking_for_user variable is from a Node.js response. The code manages to reach the console.log('I reached here.'); but the HTML doesn't change.

The document.querySelector() line does not work. I tried even simpler parameters to document.querySelector() (just a string - no hyperlink) but it failed as well.

Anyone has a clue on what i am doing wrong here?

Duc Hong
  • 1,149
  • 1
  • 14
  • 24
user1584421
  • 3,499
  • 11
  • 46
  • 86
  • Are you getting an error in the JavaScript console that says you can't set a property of null? – Barmar Nov 21 '19 at 18:14

1 Answers1

1

The script you wrote will execute before the document is fully loaded, so querySelector will not find anything. If you put the script after the HTML, it should work as expected.

Daniel Arant
  • 483
  • 1
  • 4
  • 16