logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

O evento onchange

Na última aula, todos os exemplos foram feitos com o botão "Mostrar". Porém, podemos soltar aquelas informações em tempo real, sem precisar dos botões, usando o evento onchange.


Solte aqui a opção selecionada:

                    

    document.getElementById("escolaridade").onchange = function () {

        var campo_select = document.getElementById("escolaridade");
        var indice_selecionado = campo_select.options.selectedIndex;
        var valor_selecionado = campo_select.options[indice_selecionado].innerHTML;
        document.getElementById("escolaridade_selecionada").innerHTML = valor_selecionado;

    };

                    
                

Os outros campos também permitem o uso deste evento, só é preciso tomar cuidado na identificação de que elemento sofrerá mudança. No caso do select box, é o elemento <select>, que possui todos os itens, que sofre a mudança. Mas no caso dos radio buttons ou checkboxes, cada um dos itens sofrerá mudança, portanto precisamos monitorar o evento em cada um deles através de um loop:

Selecione os itens do pedido:
Hamburguer
Batata Frita
Refrigerante

Solte aqui as opções selecionadas:


                    

    var check = document.getElementsByName("lanche");

    for (var a = 0;  a < check.length; a++) {

        check[a].onchange = function () {

            document.getElementById("check_selecionado").innerHTML = "";
            
            for (var b = 0;  b < check.length; b++) {
                
                if (check[b].checked) {
                    document.getElementById("check_selecionado").innerHTML += '<li>' + check[b].value + '</li>';
                }
            }
        }  
    }

                    
                

Índice de Aulas