I can't seem to disable a HTML button using my Javascript function

I created a button in HTML that is currently disabled but is supposed to become enabled after a particular textbox is found to no longer be empty. Then, the button saves the name with the score from the previously completed game on another web page. I did this by linking the button and textbox to a JavaScript file and specifying a function to do this for me. However, the button is refusing to become enabled even after the textbox is filled.

This is the code I tried:
What do you suggest I change?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function checkInput() {
  var input = document.getElementById('username');
  var button = document.getElementById('saveScoreBtn');

  if (input.value !== '') {
    button.disabled = true;
  } else {
    button.disabled = false;
  }
}

<!-- language: lang-html -->

<form class="end-form-container">
  <h2 id="end-text">Enter your name below to save your score!</h2>
  <input type="text" name="name" id="username"
      placeholder="Enter your name!" onkeyup="checkInput()" />
  <button class="btn" id="saveScoreBtn" type="submit"
      onclick="saveBtn(event)" disabled>
    Save
  </button>
</form>

<!-- end snippet -->

It looks like you might have mistakenly switched your conditions in your if-else statement in the JavaScript function checkInput. You set the button to be disabled if the input is not empty (input.value !== ''), which is the opposite of what you're trying to achieve. Try switching the conditions like so:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function checkInput() {
  var input = document.getElementById('username');
  var button = document.getElementById('saveScoreBtn');

  if (input.value !== '') {
    button.disabled = false; // button should be enabled when input is not empty
  } else {
    button.disabled = true; // button should be disabled when input is empty
  }
}

<!-- language: lang-html -->

<form class="end-form-container">
  <h2 id="end-text">Enter your name below to save your score!</h2>
  <input type="text" name="name" id="username" placeholder="Enter your name!" onkeyup="checkInput()" />
  <button class="btn" id="saveScoreBtn" type="submit" onclick="saveBtn(event)" disabled>
    Save
  </button>
</form>

<!-- end snippet -->

Also, ensure that your JavaScript code is properly linked to your HTML file and that there are no errors preventing the checkInput function from running. You should see errors in your web browser's JavaScript console if there are any.

Try this and let me know in comments.

No need to implement custom form validation. It's baked-into the <form> element.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function handleSubmit(e) {
  e.preventDefault(); // Prevent page navigation
  
  console.log(e.target.elements.username.value); // Value...
}

<!-- language: lang-html -->

<form class="end-form-container" onsubmit="handleSubmit(event)">
  <h2 id="end-text">Enter your name below to save your score!</h2>
  <input type="text" name="name" id="username"
      placeholder="Enter your name!" required/>
  <button type="submit" class="btn" id="saveScoreBtn">
    Save
  </button>
</form>

<!-- end snippet -->