1

Digamos que eu tenha o seguinte SELECT no meu HTML:

<form name="formularioEstados">
    <label for="states">Selecione um estado:<br>
        <select id="states" name="estados" onChange="mostraCapital()">
            <option value=""></option>
            <option value="AC">Acre</option>
            <option value="AL">Alagoas</option>
            <option value="AP">Amapá</option>
            <option value="AM">Amazonas</option>
            <option value="BA">Bahia</option>
            <option value="CE">Ceará</option>
            <option value="DF">Distrito Federal</option>
            <option value="ES">Espirito Santo</option>
            <option value="GO">Goiás</option>
            <option value="MA">Maranhão</option>
            <option value="MS">Mato Grosso do Sul</option>
            <option value="MT">Mato Grosso</option>
            <option value="MG">Minas Gerais</option>
            <option value="PA">Pará</option>
            <option value="PB">Paraíba</option>
            <option value="PR">Paraná</option>
            <option value="PE">Pernambuco</option>
            <option value="PI">Piauí</option>
            <option value="RJ">Rio de Janeiro</option>
            <option value="RN">Rio Grande do Norte</option>
            <option value="RS">Rio Grande do Sul</option>
            <option value="RO">Rondônia</option>
            <option value="RR">Roraima</option>
            <option value="SC">Santa Catarina</option>
            <option value="SP">São Paulo</option>
            <option value="SE">Sergipe</option>
            <option value="TO">Tocantins</option>
        </select>
    </label>
    <br>
    <label for="capital"> A sua capital é: <br>
        <input id="capital" type="text" name="nomeCapital" disabled>
    </label>
</form>

Para pegar o valor do estado selecionado fazemos uso do evento onChange, e a professora do meu curso técnico nos ensinou da seguinte forma:

var estado = document.formularioEstados.estados.value;

Essa é a melhor forma de se fazer, está correto, ou existe outra maneira mais eficiente e mais correta?

1 Resposta 1

2

Isso funciona em todos os browsers, mas eu diria que é antiquado, pois é do tempo do chamado "DOM Level 0", quando não havia nenhuma especificação formal de como esse tipo de coisa deveria funcionar. Curioso a professora ensinar assim. Uma maneira mais atual seria:

var estado = document.getElementById('estados').value;

Ou:

var estado = document.querySelector('#estados').value;

Quanto à definição do event listener inline (no próprio HTML, em <select id="states" name="estados" onChange="mostraCapital()">), é altamente recomendável evitar. O motivo é a separação de responsabilidades: num código organizado, o HTML deve ser responsável somente pela estrutura do conteúdo, e o JavaScript deve ser responsável pelo comportamento. Nesse trecho você tem estrutura e comportamento misturados no próprio HTML. Para levar para o JS, remova o onChange="mostraCapital()" e use isto no lugar:

var campo = document.getElementById('estados');
campo.addEventListener('change', mostraCapital, false);
4
  • Sim, eu vejo a maioria das pessoas fazendo o uso do getElementByid e logo estranhei (principalmente pelo fato de ela usar o livro bem velho para ministrar a aula). O uso do evento na tag está correto?
    – user23124
    Commented 11/05/2015 às 18:11
  • Complementei a resposta para explicar melhor e falar dessa parte do evento.
    – bfavaretto
    Commented 11/05/2015 às 18:20
  • Muito obrigado, excelente explicação.
    – user23124
    Commented 11/05/2015 às 18:21
  • 1
    @natan se quiseres podes também votar na resposta +1 para mostrar que ela é útil. "o HTML deve ser responsável somente pela estrutura do conteúdo, e o JavaScript deve ser responsável pelo comportamento" ++
    – Sergio
    Commented 11/05/2015 às 18:59

Você deve fazer log-in para responder a esta pergunta.