How to pick up field values with javascript

Question

Let’s say I have the following SELECT in my 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>

To get the value of the selected state we use the event onChange, and the teacher of my technical course taught us as follows:

var estado = document.formularioEstados.estados.value;

This is the best way to do it, it’s right, or is there another way more efficient and more correct?

Answer 1

This works on all browsers, but I would say it’s old-fashioned, because it’s from the time of the so-called "DOM Level 0" when there was no formal specification of how this kind of thing should work. Curious the teacher teach like this. A more current way would be:

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

Or:

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

As for the definition of Event Listener inline (in HTML itself, in <select id="states" name="estados" onChange="mostraCapital()">), it is highly recommended to avoid. The reason is the separation of responsibilities: in an organized code, HTML should be responsible only for the content structure, and Javascript should be responsible for the behavior. In this section you have structure and behavior mixed in the HTML itself. To take to the JS, remove the onChange="mostraCapital()" and use this instead:

var campo = document.getElementById('estados');
campo.addEventListener('change', mostraCapital, false);