Question

我在JSP文件上有以下代码，我希望<label>名为'complemento'的文本根据<select>名为'tipo'中选择的选项进行更改。 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>

Answer 1

mudaTexto，而不是mudatexto。你必须正确拼写功能名称。 JavaScript区分大小写。

您的POST请求返回：

{
  "ok": true,
  "error": false
}

您也没有具有此类ID的元素，只有名称。

不要使用.innerHTML。这是.value。

测试并工作。

Answer 2

你没有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';
}

Answer 3

好像安德烈说的那样;

标签（您要更改的文字）的名称为complemento，但您正在查找ID为complemento的元素，因此无效。

然后，函数名称区分大小写，就像其他人说的那样，mudatexto应该是mudaTexto并且您正在尝试访问tipo，就像它定义了id属性一样，但它是只有一个名字; this.form.tipo无效，请使用this.value，然后您的html for tipo将如下所示;

<select name="tipo" onchange="mudaTexto(this.value)">
   <option value="0">Aluno</option>
   <option value="1">Professor</option>
   <option value="2">Funcionario</option>
</select>

您可以尝试使用Andrei的解决方案，也可以使用document.getElementsByName()[0]代替document.getElementById()，这将是这样的;

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

也;你应该看看使用angularjs，它将删除任何使用javascript或jquery做这样的事情。

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

3 个答案: