Why is the onSignupSuccess function of my code not running?

The code below should display a message, depending on the result of another function. However, only the test message in eventListener is appearing. Which of these two should I edit?

  <nav>
    <div class="logo">
      <h1>iConsult | <span>Appointment Scheduling System</span></h1>
    </div>
  </nav>

  <form id="signupForm">
    <input type="text" placeholder="Enter your full name" id="signupName" required>
    <br>
    <input type="email" placeholder="Enter your email" id="signupEmail" required>
    <br>
    <label for="position">Position:</label>
    <select name="Position" id="position" required>
      <option value="student">Student</option>
      <option value="teacher">Teacher</option>
    </select>
    <br>
    <label for="strand">Strand:</label>
    <select name="Strand" id="Strand" required>
      <option value="">--Please select your strand below:--</option>
      <option value="abm">ABM</option>
      <option value="ESTEM-C">ESTEM-C</option>
      <option value="ESTEM-E">ESTEM-E</option>
      <option value="ESTEM-H">ESTEM-H</option>
      <option value="HUMSS">HUMSS</option>
      <option value="TVL">TVL</option>
      <option value="N/A">N/A (For teachers)</option>
    </select>
    <br>
    <input type="text" placeholder="Section" id="Section">
    <br>
    <input type="button" class="button" value="Submit" id="signupButton">
  </form>

  <script>
    function submitSUForm() {
      var name = document.getElementById("signupName").value;
      var email = document.getElementById("signupEmail").value;
      var position = document.getElementById("position").value;
      var strand = document.getElementById("Strand").value;
      var section = document.getElementById("Section").value;
    
      google.script.run.signupUser(name, email, position, strand, section);
    }

    document.addEventListener('DOMContentLoaded', function() {
      const signupButton = document.getElementById('signupButton');

      signupButton.addEventListener('click', function() {
        console.log("Signup button clicked");
        alert("Form Submitted"); // For testing purposes

        submitSUForm();
      });
    

    function onSignupSuccess(result) {
      if (result) {
        alert('Registration Successful');
      } else {
        alert('Registration failed!');
      }
    }

  });
  </script>
</body>

Google script code:

  return HtmlService.createHtmlOutputFromFile('dbpage');
}

function signupUser(signupName, signupEmail, position, strand, section, password, confirmPassword) {
  if (signupName === '' || signupEmail === '' || position === '' || strand === '' || section === '' ) {
    return false; // Empty fields are not allowed
  }

  var sheet = SpreadsheetApp.openById('YAn_AeK3uEQK77oOtGCVOI12TJHWN0QE').getSheetByName('Login');
  var data = sheet.getDataRange().getValues();

  for (var i = 1; i < data.length; i++) {
    if (data[i][2] === signupEmail) {
      return false; // Duplicate email found
    }
  }
  
  // Append new user data
  sheet.appendRow([signupName, signupEmail, position, strand, section]);
  
  return true; // Signup successful
}


function mySleep (sec) {
  SpreadsheetApp.flush();
  Utilities.sleep(sec*1000);
}

I want to return a ‘Registration Successful’ message if it’s okay, and ‘Registration Failed, email exists already.’ message if the result is otherwise.