Willian Gustavo Veiga

S01E01 - Uma piada, um Fausto Silva e o método querySelector do JavaScript

26/08/2017

O site de humor "Piadas da Praça" pediu para sua empresa criar a seguinte página HTML:

    <h1>O que o Faustão disse para o paciente internado no hospital?</h1>
    <form method="post">
      <input id="resposta1" name="resposta" type="radio" value="Você vai viver!"/>
      <label for="resposta1">Você vai viver!</label>
      <input id="resposta2" name="resposta" type="radio" value="Você é o Pelé?"/>
      <label for="resposta2">Você é o Pelé?</label>
      <input id="resposta3" name="resposta" type="radio" value="Você vai morrer!"/>
      <label for="resposta3">Você vai morrer!</label>
      <input type="submit" value="Responder"/>
    </form>
    

Agora você tem que descobrir qual opção foi selecionada pelo usuário. Qual a forma mais fácil de fazer isso?

document.querySelector ao resgate!

Existe uma solução bem simples. Para obter uma referência do elemento selecionado basta usar o código document.querySelector('input[type=radio]:checked'). Se o usuário selecionar uma das opções, esse código vai retornar o elemento selecionado. Caso contrário, null será retornado.

"Tá, você jogou o código aí, mostrou o que ele faz e agora quer que eu entenda essa magia negra?". Calma! Eu explico passo a passo!

document é o documento onde as opções, que são inputs com o atributo type="radio", estão presentes.

querySelector é um método que retorna o primeiro elemento (neste caso, o primeiro elemento filho de document) apartir de um ou vários seletores CSS.

'input[type=radio]:checked' é o seletor CSS para selecionar o elemento HTML referente à opção selecionada pelo usuário. Ele seleciona todos os elementos "input" que tenham o atributo "type" com o valor "radio" e que estejam selecionados (":checked"). Como as opções têm o mesmo valor ("resposta") para o atributo "name", apenas uma opção pode ser selecionada por vez.

Fácil, não é mesmo?

E agora, já sabe o que o Faustão disse para o paciente internado no hospital? Não sabe? Confere o vídeo abaixo:

Valeu, até a próxima!