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

Problemas com carregamento de IMG dentro de um IF

Fala pessoal. Beleza ?

Abri um tópico ontem para tentar achar uma solução, porém, acabei finalizando o tópico sem querer.

Pois bem.... O meu programinha tem a seguinte função, ele pega o ano de nascimento e o sexo, logo depois, ele retorna com um texto e uma foto referente a idade. O problema tá nas condições IF, pois ele pega o ano e não retorna a IMG correto. Além disto, tentei fazer uma outra versão do arquivo.js para tentar validar os inputs corretamente, mas acho que tá ficando meio zuado kkkk

Alguma sugestão para um dev. que tá começando agora com Javascript ?

OBS: Esse programinha é quase o mesmo do Gustavo Guanabara do Curso em Videos do YouTube

function verificar() {
    //Pegando o ano atual
    var data = new Date()
    var ano = data.getFullYear()


    //ligação dos inputs com as variaveis
    var nascimento = document.getElementById('ano')
    var nascimento_valor = Number(nascimento.value)

    var sexo = document.getElementsByName('radioSexo')
    var texto = document.getElementById('texto')
    var imagem = document.createElement('img')
    imagem.setAttribute('id', 'foto')
    var tag_img = imagem



    //Verificação de dados 
    if (nascimento_valor > ano || nascimento_valor < 1900) {
        alert('Por Favor verifique os dados de nascimento !!!')
    } else {
        var idade = Number(ano - nascimento_valor)
    }


    //Recebendo e convertendo os valores
    var genero = ''
    if (sexo[0].checked) {
        genero = 'masculino'

        //Criando o elemento <img> para receber as imagens
        if (nascimento_valor >= 0 && nascimento_valor <= 10) {
            imagem.setAttribute('src', 'crianca-masculino.jpg') 

        } else if (nascimento_valor >= 11 && nascimento_valor <= 18) {
            imagem.setAttribute('src', 'jovem-masculino.jpg');

        } else if (nascimento_valor >= 19 && nascimento_valor <= 50) {
            imagem.setAttribute('src', 'adulto-masculino.jpg');

        } else {
            imagem.setAttribute('src', 'idoso-masculino.jpg')
        }

    } else if (sexo[1].checked) {
        genero = 'feminino'

        //Criando o elemento <img> para receber as imagens
        if (nascimento_valor >= 0 && nascimento_valor <= 10) {
            imagem.setAttribute('src', 'crianca-masculino.jpg')

        } else if (nascimento_valor >= 11 && nascimento_valor <= 18) {
            imagem.setAttribute('src', 'jovem-feminino.jpg')

        } else if (nascimento_valor >= 19 && nascimento_valor <= 50) {
            imagem.setAttribute('src', 'adulto-feminino.jpg')

        } else {
            imagem.setAttribute('src', 'idoso-masculino.jpg')
        }

    } else {
        alert('Você esqueceu de marcar o sexo !!!')
    }


    //Recebendo o texto dinamicamente
    texto.innerText = `Você nasceu em ${nascimento_valor}, tem ${idade} anos e gênero ${genero}`
    texto.appendChild(imagem)
}

link do repositório GitHub: https://github.com/MatheusDourado/Calculadora-de-idade

3 respostas
solução!

Oi Matheus tudo bem?

Nos if você colocou o ano de nascimento ao invés da idade. Segue código correto:

function verificar() {
    //Pegando o ano atual
    var data = new Date()
    var ano = data.getFullYear()


    //ligação dos inputs com as variaveis
    var nascimento = document.getElementById('ano')
    var nascimento_valor = Number(nascimento.value)

    var sexo = document.getElementsByName('radioSexo')
    var texto = document.getElementById('texto')
    var imagem = document.createElement('img')
    imagem.setAttribute('id', 'foto')
    var tag_img = imagem



    //Verificação de dados 
    if (nascimento_valor > ano || nascimento_valor < 1900) {
        alert('Por Favor verifique os dados de nascimento !!!')
    } else {
        var idade = Number(ano - nascimento_valor)
    }


    //Recebendo e convertendo os valores
    var genero = ''
    if (sexo[0].checked) {
        genero = 'masculino'

        //Criando o elemento <img> para receber as imagens
        if (idade >= 0 && idade <= 10) {
            imagem.setAttribute('src', 'crianca-masculino.jpg') 

        } else if (idade >= 11 && idade <= 18) {
            imagem.setAttribute('src', 'jovem-masculino.jpg');

        } else if (idade >= 19 && idade <= 50) {
            imagem.setAttribute('src', 'adulto-masculino.jpg');

        } else {
            imagem.setAttribute('src', 'idoso-masculino.jpg')
        }

    } else if (sexo[1].checked) {
        genero = 'feminino'

        //Criando o elemento <img> para receber as imagens
        if (idade >= 0 && idade <= 10) {
            imagem.setAttribute('src', 'crianca-masculino.jpg')

        } else if (idade >= 11 && idade <= 18) {
            imagem.setAttribute('src', 'jovem-feminino.jpg')

        } else if (idade >= 19 && idade <= 50) {
            imagem.setAttribute('src', 'adulto-feminino.jpg')

        } else {
            imagem.setAttribute('src', 'idoso-feminino.jpg')
        }

    } else {
        alert('Você esqueceu de marcar o sexo !!!')
    }


    //Recebendo o texto dinamicamente
    texto.innerText = `Você nasceu em ${nascimento_valor}, tem ${idade} anos e gênero ${genero}`
    texto.appendChild(imagem)
}

Espero ter ajudado!!!

Nossa era exatamente isso mesmo, tava vendo e revendo o código e nada de apresentar erro no console, pois era erro de logica.

André Victor Ruiz Pedroso muito obrigado pela ajudar, logo logo retornarei pro Alura pra dá continuidade aos meus estudos.

Desde já muito obrigado amigo ;)

Disponha e bons estudos!!!