Ir ao conteúdo
  • Cadastre-se

Javascript Como resolver erro erro Uncaught TypeError: Cannot read property 'checked' of un


Posts recomendados

Galera, seguinte, comecei a aprender a programar em JS esses dias, e hoje quando fui fazer um bendito exercício, eu tive dor de cabeça, faz algum tempinho que to tentando achar o erro, mas nada, então vim aqui apelar pra vocês hahahaha

Segue o erro e o code respectivamente!

 

Uncaught TypeError: Cannot read property 'checked' of undefined
    at verificar (http://127.0.0.1:5500/AULA13(Exerc%C3%ADcios)/Ex15/script.js:14:20)
    at HTMLInputElement.onclick (http://127.0.0.1:5500/AULA13(Exerc%C3%ADcios)/Ex15/2.html:29:79)

 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modelo do Ex2</title>
    <link rel="stylesheet" href="estilo.css">

</head>
<body>
    <header>
        <h1>Verificador de Idade</h1>
    </header>
    
    <section>
        <div>
            <p>Ano de nascimento:
                <input type="number" name="txtAno" id="txtAno" min="0">
            </p>

            <p>Sexo:
                <input type="radio" name="radSex" id="mas" checked>
                <label for="mas">Masculino</label>
                <input type="radio" name="radSex" id="fem">
                <label for="fem">Feminino</label>
            </p>

            <p>
                <input type="button" value="Verificar" onclick= "verificar()">
            </p>
        </div>

        <div id= "res">
            Preencha os dados acima para ver o resultado!
        </div>
    </section>

    <footer>
        <p>&copy; tioTheus</p>
    </footer>
    
    <script src="script.js"></script>
</body>
</html>
function verificar(){
    var data= new Date()
    var ano= data.getFullYear()
    var fAno= document.getElementById('txtAno')
    var res= document.querySelector('div#res')
    if(fAno.value.length == 0 || fAno.value > ano){
        window.alert('[ERRO] Verifique os dados e tente novamente!')
    }
    else{
        var fsex= document.getElementsByClassName('radSex')
        var idade= ano - fAno.value
        //res.innerHTML= `Idade Calculada: ${idade}`
        var genero= ''
        if(fsex[0].checked){
            genero= 'Homem'
        }
        else if(fsex[1].checked){
            genero= 'Mulher'
        }
        res.innerHTML= `Detectamos ${genero} com ${idade} anos.`
    }
}

image.thumb.png.75a3a998366cda4c2433e0529c8f47be.png

Link para o comentário
Compartilhar em outros sites

@Matheus Eduardo Vieira 

 

O seletor 'getElementsByClassName' em javascript seleciona o name(nome) do elemento é não o nome que você coloca no atributo name, por isso que o erro está acontecendo, dessa forma ele acaba retornado uma lista vazia.

 

Você pode corrigir isso trocando o seletor, nesse caso eu uso o seletor "querySelectorAll"

 var fsex = document.querySelectorAll('input[type="radio"]');

image.thumb.png.a1ad4cfac93a919e6475a8a4fa86488e.png

  • Curtir 2
  • Obrigado 2
Link para o comentário
Compartilhar em outros sites

  • 5 meses depois...

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Como se tornar um desenvolvedor full-stack

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!