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:
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>';
}
}
}
}