Email validation not working after rendering html page

I am trying to do email validation after user type finish their email. However, it is not indicating that the email is valid or not. I place the javascript at the top to let it run while rendering but it doesn't work either. The code below is the screen for registration using javascript. This is rendered using nodejs. Is it due to the position of code or am I missing something?

RegisterScreen.js

const RegisterScreen = {
  render: () =>   
  `
      <script type="text/javascript"> 
      const email = document.getElementById("email")
      
      email.addEventListener('input',()=>{
        const emailBox = document.querySelector('.emailBox')
        const emailText = document.querySelector('.emailText')
        const emailPattern = /[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$/
  
        if(email.value.match(emailPattern)){
          emailBox.classList.add('valid')
          emailBox.classList.remove('invalid')
          emailText.innerHTML = "Your Email Address in Valid"
        }else{
          emailBox.classList.add('invalid')
          emailBox.classList.remove('valid')
          emailText.innerHTML = "Must be a valid email address."
        }
      })
      </script>   
      <div class="form">
        <form id="register-form" action="#">
          <ul class="form-container">
            <li>
              <h2>Create Account</h2>
            </li> 
            <li>
              <label for="name">Name</label>
              <input type="name"
                name="name"     
                id="name"
                required />
            </li>
            <li>
              <label for="email" class="emailBox">Email</label>
              <input type="email"
                name="email"
                id="email"  
                required          
                />
              <span class="emailText"></span>
            </li>
            <li>
              <label for="password">Password</label>
              <input type="password"
                id="password"
                name="password"
                required        
                />
            </li>
            <li>
              <label for="re-password">Re-Enter Password</label>
              <input type="password"
                id="re-password"
                name="re-password"
                required            
                />
            </li>
            <li>
              <button type="submit" class="primary">
                Register
              </button>
            </li>
            <li>
              <div>Already have an account? <a href="/#/signin"> Sign-In </a>
              </div>
            </li>
          </ul>
        </form>
      </div>`,
}
export default RegisterScreen