skip to Main Content

I have this JS code that changes the innerHTML of a div. This innerHTML contains the call of a JS function. The definition of the function is also contained the in the same .js file. Will the JS function validate_login_password be executed after the changed innerHTML is done?

function startup(mode) {
  return function () {
    if (mode == "login") {
      document.getElementById("main").innerHTML = `                                                                                                                               
<div class="grid-auth">                                                                                                                                                           
<div class="item3">                                                                                                                                                               
<form action="/login.pl">                                                                                                                                                         
<label for="username">Nome de usuário</label>                                                                                                                                     
<input type="text" id="login_username" name="login_username" required>                                                                                                            
<label for="login_password">Senha</label>                                                                                                                                         
<input type="password" id="login_password" name="login_password" required>                                                                                                        
<input type="submit" value="Iniciar sessão">                                                                                                                                      
</form>                                                                                                                                                                           
</div>                                                                                                                                                                            
<div class="item4">                                                                                                                                                               
<form action="/login.pl">                                                                                                                                                         
<label for="username">Nome completo</label>                                                                                                                                       
<input type="text" id="name" name="name" required>                                                                                                                                
<label for="username">Nome de usuário</label>                                                                                                                                     
<input type="text" id="signup_username" name="signup_username" required>                                                                                                          
<label for="email">Email</label>                                                                                                                                                  
<input type="email" id="email" name="email" required>                                                                                                                             
<label for="signup_password">Senha</label>                                                                                                                                        
<input type="password" id="signup_password" name="signup_password" pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}.{?=.*[!@#$%^&.?]" title="Deve conter pelo menos um número, uma le
tra maiúscula, uma letra minúscila, um dos símbolos !?@#$%^&. e pelo menos 8 caracteres" required>                                                                                
<input type="submit" value="Criar conta">                                                                                                                                         
</form>                                                                                                                                                                           
</div>                                                                                                                                                                            
<div class="item5" id="message">                                                                                                                                                  
<h3>Password must contain the following:</h3>                                                                                                                                     
<p id="letter" class="invalid">Uma letra <b>minúscula</b></p>                                                                                                                     
<p id="capital" class="invalid">Uma letra <b>maiúscula</b></p>                                                                                                                    
<p id="number" class="invalid">Um <b>número</b></p>                                                                                                                               
<p id="symbol" class="invalid">Um <b>símbolo</b></p>                                                                                                                              
<p id="length" class="invalid">Mínimo <b>8 caracteres</b></p>                                                                                                                     
</div>                                                                                                                                                                            
</div>                                                                                                                                                                            
<script>validate_signup_password()</script>`;
    } else {
      document.getElementById("main").innerHTML = "<h1>Olá mundo</h1>";
    }
  }
}

function validate_signup_password () {
 ...
}

Thanks!

2

Answers


  1. Yes… Your function will be executed after creating new innerHtml..
    Even you don’t need to give script tag inside your innerHtml.
    You can just declare function name and use your function directly.
    As javascript functions can be called directly from a single file.

    function startup(mode) {
    if (mode == "login") {
      document.getElementById("main").innerHTML = `                                                                                                                               
      <div class="grid-auth">                                                                                                                                                           
      <div class="item3">                                                                                                                                                               
      <form action="/login.pl">                                                                                                                                                         
      <label for="username">Nome de usuário</label>                                                                                                                                     
      <input type="text" id="login_username" name="login_username" required>                                                                                                            
      <label for="login_password">Senha</label>                                                                                                                                         
      <input type="password" id="login_password" name="login_password" required>                                                                                                        
      <input type="submit" value="Iniciar sessão">                                                                                                                                      
      </form>                                                                                                                                                                           
      </div>                                                                                                                                                                            
      <div class="item4">                                                                                                                                                               
      <form action="/login.pl">                                                                                                                                                         
      <label for="username">Nome completo</label>                                                                                                                                       
      <input type="text" id="name" name="name" required>                                                                                                                                
      <label for="username">Nome de usuário</label>                                                                                                                                     
      <input type="text" id="signup_username" name="signup_username" required>                                                                                                          
      <label for="email">Email</label>                                                                                                                                                  
      <input type="email" id="email" name="email" required>                                                                                                                             
      <label for="signup_password">Senha</label>                                                                                                                                        
      <input type="password" id="signup_password" name="signup_password" pattern="(? 
       =.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}.{?=.*[!@#$%^&.?]" title="Deve conter pelo 
      menos um número, uma le
      tra maiúscula, uma letra minúscila, um dos símbolos !?@#$%^&. e pelo menos 8 
      caracteres" required>                                                                                
      <input type="button" value="Criar conta" 
       onclick="validate_signup_password()">                                                                                                                                         
      </form>                                                                                                                                                                           
      </div>                                                                                                                                                                            
      <div class="item5" id="message">                                                                                                                                                  
      <h3>Password must contain the following:</h3>                                                                                                                                     
      <p id="letter" class="invalid">Uma letra <b>minúscula</b></p>                                                                                                                     
      <p id="capital" class="invalid">Uma letra <b>maiúscula</b></p>                                                                                                                    
      <p id="number" class="invalid">Um <b>número</b></p>                                                                                                                               
      <p id="symbol" class="invalid">Um <b>símbolo</b></p>                                                                                                                              
      <p id="length" class="invalid">Mínimo <b>8 caracteres</b></p>                                                                                                                     
      </div>                                                                                                                                                                            
      </div>`;
          } else {
            document.getElementById("main").innerHTML = "<h1>Olá mundo</h1>";
          }
    
      }
    
      function validate_signup_password () {
       "Your Code/Logic"
      }
    

    ADDING CODEPEN TO CHECK

    Login or Signup to reply.
  2. Maybe I’ve misunderstood the question but wouldn’t it be better to add an event listener to the innerHTML change event? I think this can be done now, see: enter link description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search