Ir ao conteúdo
  • Cadastre-se
Regras do Clube do Hardware

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

Matheus Eduardo Vieira

Por Matheus Eduardo Vieira
em Web e banco de dados

 Compartilhar

Posts recomendados

Matheus Eduardo Vieira
 

Matheus Eduardo Vieira

Postado
Postado

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
GabrielSennaMs
 

GabrielSennaMs

Postado
Postado

@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...
  • 1 ano depois...
ArthurA7Silva
 

ArthurA7Silva

Postado
Postado

Estou fazendo o mesmo curso xD e também quebrei a cabeça com esse erro. A solução do amigo acima funciona, mas eu achei outra maneira de corrigir:

Ao invés de usar getElementsbyName, (que é o comando que o Guanabara digitou no vídeo, eu tinha digitado getElementsByTagName. No caso do amigo que fez a pergunta, ele digitou getElementsByClassName.

 

Enfim, bastou mudar pra getElementsByName pra funcionar perfeitamente 🙂

Parabéns pra quem não desistiu ao encarar esse erro e resolveu pesquisar a respeito. Essa é uma das atitudes de quem vai ter sucesso nessa carreira.

Link para o comentário
Compartilhar em outros sites
  • 3 meses depois...
Diogo Jose da Silva
 

Diogo Jose da Silva

Postado
Postado

 

 

Muito bom@GabrielSennaMs, sua solução me ajudou a criar uma aqui. No meu caso estou fazendo o verificador com a opção de selecionar se a pessoa fez ou não aniversário, assim a idade fica exata, pois isso ao usar o 

  

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

Ele selecionava todos os inputs no HTML, então criei uma classe com o nome 'sexo' e recuperei assim.

HTML 

<p>Sexo: 
  <input type="radio" name="radsex" id="masc" class="sexo">
  <label for="masc">Masculino</label>
  <input type="radio" name="radsex" id="fem" class="sexo">
  <label for="fem">Feminino</label>
</p>

JavaScript 

var sexo = document.querySelectorAll('input.sexo')
Link para o comentário
Compartilhar em outros sites

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
 Compartilhar
Ir à lista de tópicos

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

Mais

×
×
  • Criar novo...