title: Change text of a <label> dynamicly based on <select>
body: <p>I have the following code on a JSP file, where I want the text for the <code>&lt;label&gt;</code> named 'complemento' to be changed according to the option selected in the <code>&lt;select&gt;</code> named 'tipo'. is there any error with the javascript code, because when I open the page in the browser, it doesn't work as desired.</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd"&gt;
     &lt;html&gt;
        &lt;head&gt;
           &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
           &lt;title&gt;Cadastra Usuario&lt;/title&gt;
  
           &lt;script&gt;
              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';
              }
           &lt;/script&gt;
  
        &lt;/head&gt;
        &lt;body&gt;
  
           &lt;p align="center"&gt;
              &lt;span class="usuario"&gt;${nome}&lt;/span&gt; | &lt;strong&gt; Hora Livre&lt;/strong&gt; | &lt;a href="/hora_livre/ProcessaSaida"&gt; Sair&lt;/a&gt;
           &lt;/p&gt;
  
           &lt;p align="center"&gt;
              &lt;form method="post" action="/hora_livre/CadastraUsuario"&gt;
              &lt;table&gt;
                 &lt;tr&gt;
                    &lt;td&gt;Login: &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="username"&gt;&lt;/td&gt;
                 &lt;/tr&gt;
                 &lt;tr&gt;
                    &lt;td&gt;Digite uma Senha: &lt;/td&gt; &lt;td&gt;&lt;input type="password" name="password"&gt;      
                    &lt;/td&gt;
                 &lt;/tr&gt;
                 &lt;tr&gt;
                    &lt;td&gt;Repita a Senha: &lt;/td&gt; &lt;td&gt;&lt;input type="password" name="senha"&gt;&lt;/td&gt;
                 &lt;/tr&gt;
                 &lt;tr&gt;
                    &lt;td&gt;Tipo de usuario: &lt;/td&gt;
                    &lt;td&gt;
                       &lt;select name="tipo" onchange="mudatexto(this.form.tipo)"&gt;
                          &lt;option value="0"&gt;Aluno&lt;/option&gt;
                          &lt;option value="1"&gt;Professor&lt;/option&gt;
                          &lt;option value="2"&gt;Funcionario&lt;/option&gt;
                       &lt;/select&gt;
                    &lt;/td&gt;
                 &lt;/tr&gt;
                 &lt;tr&gt;
                    &lt;td&gt;Nome Completo: &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="name"&gt;&lt;/td&gt;
                 &lt;/tr&gt;
                 &lt;tr&gt;
                    &lt;td&gt;&lt;label for="complemento"&gt;Periodo&lt;/label&gt;&lt;/script&gt;&lt;/label&gt; &lt;/td&gt; 
                    &lt;td&gt;    &lt;input type="text" name="complemento"&gt;&lt;/td&gt;
                 &lt;/tr&gt;
                 &lt;tr colspan=2&gt;
                    &lt;td&gt;&lt;input type="submit" value="Enviar"&gt;&lt;/td&gt;
                 &lt;/tr&gt;
              &lt;/table&gt;
           &lt;/form&gt;
        &lt;/p&gt;
  
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>