javascript - 根据<select>动态更改<label>的文本

标签 javascript html jsp

我在 JSP 文件上有以下代码,我想要 <label> 的文本。名为“complemento”的名称将根据 <select> 中选择的选项进行更改名为“蒂波”。 javascript代码是否有任何错误,因为当我在浏览器中打开页面时,它无法按预期工作。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd">
   <html>
      <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <title>Cadastra Usuario</title>

         <script>
            function mudaTexto(tipo) {
               var opcao_index = tipo.selectedIndex;
               var opcao = tipo.options[opcao_index].value;
               if(opcao == '0')
                  document.getElementById('complemento').innerHTML = 'Periodo';
               else if(opcao == '1')
                  document.getElementById('complemento').innerHTML = 'Titulo';
               else
                  document.getElementById('complemento').innerHTML = 'Status';
            }
         </script>

      </head>
      <body>

         <p align="center">
            <span class="usuario">${nome}</span> | <strong> Hora Livre</strong> | <a href="/hora_livre/ProcessaSaida"> Sair</a>
         </p>

         <p align="center">
            <form method="post" action="/hora_livre/CadastraUsuario">
            <table>
               <tr>
                  <td>Login: </td> <td><input type="text" name="username"></td>
               </tr>
               <tr>
                  <td>Digite uma Senha: </td> <td><input type="password" name="password">      
                  </td>
               </tr>
               <tr>
                  <td>Repita a Senha: </td> <td><input type="password" name="senha"></td>
               </tr>
               <tr>
                  <td>Tipo de usuario: </td>
                  <td>
                     <select name="tipo" onchange="mudatexto(this.form.tipo)">
                        <option value="0">Aluno</option>
                        <option value="1">Professor</option>
                        <option value="2">Funcionario</option>
                     </select>
                  </td>
               </tr>
               <tr>
                  <td>Nome Completo: </td> <td><input type="text" name="name"></td>
               </tr>
               <tr>
                  <td><label for="complemento">Periodo</label></script></label> </td> 
                  <td>    <input type="text" name="complemento"></td>
               </tr>
               <tr colspan=2>
                  <td><input type="submit" value="Enviar"></td>
               </tr>
            </table>
         </form>
      </p>

   </body>
</html>

最佳答案

您没有带有 id=complemento 的元素。通过将 id 添加到您的输入来修复此问题

<td><label for="complemento">Periodo</label></script></label> </td> <td><input id="complemento"  type="text" name="complemento"></td>

还使用 value 而不是innerHtml,因为它是输入

if(opcao == '0')
    document.getElementById('complemento').value= 'Periodo';
else if(opcao == '1')
    document.getElementById('complemento').value= 'Titulo';
else
    document.getElementById('complemento').value= 'Status';
}

关于javascript - 根据<select>动态更改<label>的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21877891/

相关文章:

.net - 如何在页面加载前执行 Javascript 函数?

javascript - 从嵌入的 Google Sheet 中删除 Google Border

jquery - 是否可以定位背景附件: fixed relatively to div not viewport?

javascript - 访问jsp页面javascript中的表达式语言

javascript - JQuery mouseleave 函数快速返回而不是转换?

Javascript 输出导致意外标记 <

javascript - 如何将填充作为可以单击以触发事件的 div 的一部分

android - 寻找三星蹩脚数字键盘的解决方案

java - <c :forEach> consider same values?

java - 条纹编码工作很奇怪