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
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.
ADDING CODEPEN TO CHECK
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