[Dúvida] Manipulando Doom | HTML e CSS: formulários, SEO e acessibilidade

<p>Gênero</p> <input type="radio" name="userGender" id="Feminino" value="Feminino"> <label for="Feminino">Feminino</label> <input type="radio" name="userGender" id="Masculino" value="Masculino"> <label for="Masculino">Masculino</label> <input type="radio" name="userGender" id="NaoInforma" value="NaoInforma"> <label for="NaoInforma">Não Informar</label> </fieldset> <button id="generoButton" type="submit">Enviar</button><br>

const generoButton = document.getElementById('generoButton') generoButton.addEventListener('click', (event) => { event.preventDefault(); let genero = document.querySelector('input[name="userGender"]:checked'); validarSexo(genero) }) function validarSexo(obj) { if (!obj) { console.log("Campo em branco") } else { console.log("valor escolhido", obj.value) } }

Oi, Rafael, como vai?

Agradeço por compartilhar seu código com a comunidade Alura. Com o que você descreveu e olhando o trecho que enviou, a lógica da função validarSexo está correta, então o que provavelmente está acontecendo é que o document.getElementById('generoButton') está retornando null porque o script é carregado antes do botão existir no HTML. Quando isso acontece, o evento de clique não é registrado e nada aparece no console.log, mesmo com o script na página.

Uma dica interessante para o futuro é envolver seu código em um evento de DOMContentLoaded, para garantir que o DOM já foi carregado antes de buscar os elementos. Veja este exemplo em HTML:


document.addEventListener('DOMContentLoaded', function() {
    const botao = document.getElementById('generoButton');

    botao.addEventListener('click', function(event) {
        event.preventDefault();
        let genero = document.querySelector('input[name="userGender"]:checked');

        if (!genero) {
            console.log('Campo em branco');
        } else {
            console.log('Valor escolhido:', genero.value);
        }
    });
});

Esse código espera o carregamento do DOM (DOMContentLoaded) para so depois buscar o botão generoButton, garantindo que o evento de clique funcione e mostrando no console o valor selecionado ou uma mensagem se nada foi marcado.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!