当JS使用该函数编写innerHTML时，JS函数是否执行？

Is JS function executed when JS writes innerHTML with said function?

提问人：Marcos Camargo 提问时间：8/7/2023 最后编辑：Marcos Camargo 更新时间：8/8/2023 访问量：78

问：

我有这个 JS 代码，可以更改 .此 innerHTML 包含对 JS 函数的调用。函数的定义也包含在同一个 .js 文件中。JS 函数会在更改后的 innerHTML 完成后执行吗？divvalidate_login_password

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 () {
 ...
}

谢谢！

JavaScript的

评论

1赞 chovy 8/7/2023
我不这么认为。
2赞 epascarello 8/7/2023
innerHTML 不计算脚本标记。
1赞 Mike 'Pomax' Kamermans 8/7/2023
不。只有注入到 head 元素中的脚本才会在初始页面加载后运行。将您的内容注入到需要的地方。
1赞 Tim Roberts 8/7/2023
反正你真的不需要那个。分配 后，只需执行 .innerHTMLvalidate_signup_password();
0赞 Marcos Camargo 8/8/2023
我尝试将代码放在 里面的标签中，当 innerHTML 中的 </script> 结束标签被击中时，innerHTML 的写入似乎停止了。似乎它应该等待 innerHTML 之外的 </script> 结束标记。<script><head>

答：

-2赞 Dhruvil Mehta 8/7/2023 #1

是的。。。您的函数将在创建新的 innerHtml 后执行。 即使你不需要在innerHtml中给出脚本标签。 您只需声明函数名称并直接使用您的函数即可。 由于 javascript 函数可以直接从单个文件调用。

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"
  }

添加 CODEPEN 进行检查

评论

1赞 Jaromanda X 8/7/2023
Yes...你的意思当然是No... you have to write different code
0赞 Dhruvil Mehta 8/7/2023
不。。。如果他想执行他的 innerHtml 代码并调用 JS 函数，他不需要编写不同的代码，他可以......
0赞 Jaromanda X 8/7/2023
那么，你是如何从原始代码中删除的呢？又将如何称呼？<script>validate_signup_password()</script>validate_signup_password()
0赞 Dhruvil Mehta 8/7/2023
假设他已经在脚本标签上编写代码，并且当呈现 innerHtml 时，脚本将被调用，并且在单击或需要使用的任何位置的函数将直接从脚本本身调用
0赞 Marcos Camargo 8/7/2023
@Jaromanda X 中，我尝试删除 <script>validate_signup_password（）</scrip>，但它不起作用。我尝试仅替换 validate_signup_password（），也不起作用。你能举个例子说明我应该如何编写我的代码吗？谢谢！
0赞 CharlesEF 8/8/2023 #2

也许我误解了这个问题，但是在innerHTML change事件中添加一个事件侦听器不是更好吗？我认为这现在可以完成，请参阅：在此处输入链接描述

上一个：/tmp 目录中的不可见文件

下一个：无法删除 AlaSQL 表中的行