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

Matheus Eduardo Vieira · 12 de agosto de 2020

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.`
    }
}

GabrielSennaMs · 15 de agosto de 2020

@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"]');

Matheus Eduardo Vieira · 18 de agosto de 2020

@GabrielSennaMs Valeu!!! Deu certinho aqui

Vítor_Phantomhive · 7 de fevereiro de 2021

Cara OBRIGADÍSSIMO, estou fazendo o mesmo curso que ele e fiquei bem desanimado com o erro,porque eu n conseguia achar, mas vcs 2 ajudaram muito obrigado.

ArthurA7Silva · 26 de abril de 2022

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.

Diogo Jose da Silva · 4 de agosto de 2022

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')

Entrar

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

Posts recomendados

Matheus Eduardo Vieira

GabrielSennaMs

Matheus Eduardo Vieira

Vítor_Phantomhive

ArthurA7Silva

Diogo Jose da Silva

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos