My onclick function is not working! What am I doing wrong?

I’ve been trying to write a Chess program with HTML, CSS, and Javascript. I cannot seem to be getting the onclick function for the “PLAY AS WHITE” button to be working. I’ve checked my syntax in the Javascript part and believe it looks fine to me. Is there anything I’m doing wrong with the code?

Here’s the code:

let info = document.getElementById("info");

function playAsWhite() {
  info.innerHTML = "the message I want to output";
}

<h1 id="info">Playing as White:</h1>
<h1>Best move:</h1>
<p>NaN</p>
<input type="text" placeholder="Your input:" id="inputId1">
<button onclick="player1Turn()">Enter</button>
<input type="text" placeholder="Enemy input:" id="inputId2">
<button onclick="player2Turn()">Enter</button>
<div class="functions">
  <button onclick="playAsWhite()">PLAY AS WHITE</button>
  <button onclick="playAsBlack()">PLAY AS BLACK</button>
  <button onclick="reset()">RESET</button>
</div>

I’ve defined the source file (“main.js”) correctly, and the script is loaded at the end of body.