in

Javascript function does not display d-block in Flask template


I am new to Javascript and Flask. I have written a small Javascript file which works fine when I test the HTML file from a browser directly as a stand-alone file. However, when I use the same HTML and Javascript files inside a Flask application, they do not work. Can someone please guide?

spinners.js

function showSpinners(){
    var allAreFilled = true;
    document.getElementById("regform").querySelectorAll("[required]").forEach(function(i) {
      if (!i.value) allAreFilled = false;
      })
      if (allAreFilled == true && document.getElementById("passwd1").value==document.getElementById("passwd2").value) {
          document.getElementById('spinners').classList.remove('d-none');
          document.getElementById('spinners').classList.add('d-block');
      }
  };

register.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Registration Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Registration page">
  <meta name="keywords" content="registration">
  <meta name="author" content="school">
  <!-- Bootstrap 5 -->
  <link rel="stylesheet" href="css/bootstrap.min.css"></link>
  <script src="js/spinners.js"></script>
 </head>
 <body>
  <div class="container">
   <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
    <div class="container-fluid">
     <!-- Navbar Brand -->
     <a class="navbar-brand" href="index.html">
      <img class="img-fluid" src="media/school-logo.png" alt="School Logo" width="200" height="50" style="position:absolute; top:0; left:0">
     </a>
     <!-- Toggler/Collapsible Button -->
     <button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
      <span class="navbar-toggler-icon"></span>
     </button>
     <div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
      <ul class="navbar-nav ms-2 align-items-end">
       <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
       </li>
       <li class="nav-item">
        <a class="nav-link active" href="register.html">Register</a>
       </li>
       <li class="nav-item">
        <a class="nav-link" href="login.html">Login</a>
       </li>
       <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact</a>
       </li>
      </ul>
     </div>
    </div>
   </nav>
  </div>
  <br>
  <!-- Page Label -->
  <div class="container mt-5 pt-3 pb-1" style="width: 80%;">
   <h4>Student Registration</h4>
  </div>
  <br>
  <!-- Registration Form -->
  <div class="container" style="width: 80%;">
   <form class="needs-validation" novalidate id="regform" oninput="passwd2.setCustomValidity(passwd2.value != passwd1.value ? "Passwords do not match." : "")">
    <div class="form-group">
     <label for="firstname">First Name</label>
     <input type="text" class="form-control" placeholder="What is your first name?" id="firstname" required>
     <div class="invalid-feedback">Mandatory field</div>
    </div>
    <div class="form-group">
     <label for="lastname">Last Name</label>
     <input type="text" class="form-control" placeholder="What is your last name?" id="lastname" required>
    </div>
    <div class="form-group">
     <label for="email">Email Address</label>
     <input type="email" class="form-control" placeholder="Enter email address" id="email" required>
     <div class="invalid-feedback">Please enter a valid email address</div>
    </div>
    <div class="form-group">
     <label for="passwd1">Enter Password</label>
     <input type="password" class="form-control" placeholder="Enter password (30 chars max)" id="passwd1" required>
     <div class="invalid-feedback">Passwords are mandatory and should match</div>
    </div>
    <div class="form-group">
     <label for="passwd2">Confirm Password</label>
     <input type="password" class="form-control" placeholder="Confirm password (30 chars max)" id="passwd2" required>
     <div class="invalid-feedback">Passwords are mandatory and should match</div>
    </div>
    <button type="submit" class="btn btn-primary mt-2" id="rbutton" onclick="showSpinners()">Submit</button>
   </form>
   <div class="container mt-3 d-none" id="spinners">
    <div class="spinner-border text-primary"></div>
    <div class="spinner-border text-success"></div>
    <div class="spinner-border text-info"></div>
   </div>
  </div>
  <!-- Form Validation -->
  <script src="js/validateform.js"></script>
  <!-- Bootstrap 5 -->
  <script src="js/bootstrap.bundle.min.js"></script>
  <footer class="footer mt-auto py-3 bg-light">
   <div class="container">
    <br><p class="text-muted text-center">Copyright &copy <script>document.write(new Date().getFullYear())</script> School</p>
    <p class="text-muted text-center"><a href="about.html" class="text-secondary">About</a></p>
   </div>
  </footer>
 </body>
</html>



Source: https://stackoverflow.com/questions/70558319/javascript-function-does-not-display-d-block-in-flask-template

Ethereum boilerplate – React components and hooks for fast building dApps

Getting Started with Kotlin Coroutines