Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Duvida com id's no DOM

Para aplicar uma logica de if dentro de radio buttons meus id's precisam ser distintos ? Ou há outra forma de fazer ?

E como eu poderia fazer a chamada ao marcar o radio button ?Com submit, simulando o envio, mas como chamaria a função? no onclick ? Eu colocaria aquele js dentro de uma funçao e o chamaria, ao inves de history.go(0) ?

html

<!DOCTYPE html>
<html>
    <header>
        <title>JS</title>
    </header>
    <body>
         <form method="post" action="#">
              <input type="radio" name="gender" id="other" value="other" hidden> Informe seu sexo <br>
              <input type="radio" name="gender" id="male" value="Masculino"> Masculino<br>
              <input type="radio" name="gender" id="female" value="Feminino"> Feminino<br>
              <input type="button" Value="Enviar" onClick="history.go(0)">
        </form>
    <script src="exer_cap11.js"></script>
    </body>
</html>

js

if (document.getElementById('male').checked) {
    alert(document.getElementById('male').value)
} else if (document.getElementById('female').checked) {
    alert(document.getElementById('female').value)
}
5 respostas

Apliquei a função e funcionou, agora me resta esta duvida do id, fiquei pensativo com um algoritmo simples de if else, por conta desta de duvida dos id's, de como fazer diferente a nao ser especificando ids distintos....

Não entendi muito bem sua dúvida sobre os "id"s. Mas se for trabalhar com eles, você precisa especificar "id"s diferentes para cada "Radio", caso não, use "class" e altera para .getElementsByClass...(Resto do código). Não sei se isto te ajuda, qualquer coisa, tenta explicar novamente o que você precisa, e passa o código também.

Opa Daniel

Ah cara eu acho que se for pra pegar valores de qualquer inputs na tela, eles devem ser marcados como id para algum if fazer sentido...

Fiquei refletindo se haveria outra maneira de efetuar sem o id como parametro

solução!

Oi, Eduardo.

Para mostrar qual radio está marcado sem precisar de id, temos que usar alguma outra forma de selecionar o elemento. A mais versátil é usando o document.querySelector(), pois ele recebe qualquer seletor CSS. Com ele, podemos ir direto ao elemento, como a seguir.

Queremos selecionar o radio marcado. O radio é um input, então podemos fazer:

document.querySelector('input');

Mas isso vai pegar todos os inputs da página, inclusive o botão! A diferença está no tipo, queremos apenas os inputs com tipo=radio:

document.querySelector('input[type=radio]');

Agora só falta falar que, dentre esses radios, queremos apenas o que está selecionado:

document.querySelector('input[type=radio]:checked');

Assim nem precisamos dos ifs, a função fica:

<input type="button" Value="Enviar" onClick="mostraRadioMarcado()">
function mostraRadioMarcado(){
    alert(document.querySelector('input[type=radio]:checked').value;
}

Os seletores CSS são bem poderosos, e vale a pena conhecê-los pra usar no JS. Você consegue consultar os principais tipos de seletores aqui: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

Muito legal isso, nao sabia dessa magia! hahahahah

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software