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

Problemas para carregar uma IMG dentro de um IF - JAVASCRIPT

BUG executa apenas a primeira condição do IF e carrega a foto e ignorando as demais condições e suas fotos .

Outra dúvida também a de como parar o código quando o usuário deixa de informar o um dado do formulário, pois, o máximo que consegui foi manda um alert(), porém, depois de informa o alert() ele continuar a execução do código.

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



    //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-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)
}

Desde já agradeço toda a comunidade do Alura. ;D

2 respostas

Oi Matheus tudo bem?

Poderia , por gentileza, colocar a pasta do seu projeto no github. Assim podemos analisar melhor o que está acontecendo.

solução!

Boa noite, Matheus! Como vai?

Vou responder sua questão por partes!

BUG executa apenas a primeira condição do IF e carrega a foto e ignorando as demais condições e suas fotos .

Isso ocorre pq vc está usando instruções if - else if! O JavaScript apenas entra num deles! Se vc quer que os diversos ifs sejam testados então vc precisa fazer um código assim:

if (condicao1) {
     // Lógica para a condicao 1.
}

if (condicao2) {
     // Lógica para a condicao 2.
}

Outra dúvida também a de como parar o código quando o usuário deixa de informar o um dado do formulário, pois, o máximo que consegui foi manda um alert(), porém, depois de informa o alert() ele continuar a execução do código.

Para interromper a execução da função em qualquer ponto do código dela é apenas fazer return;!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!