Problems to load an IMG inside an IF - JAVASCRIPT

Question

BUG performs only the first condition of IF and loads the photo and ignoring the other conditions and your photos .

Another question is also how to stop the code when the user fails to inform the one given form, because the most I could was send an Alert(), but after informing Alert() he continues the execution of the code.

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)

}

Answer 1

Try only 1 condition per ex:

var idade =41
if (idade < 10){
   console.log('criança')
} else if(idade < 15){
   console.log('pre-adolescente')
} else if(idade < 40){
   console.log('adulto')
} else {
   console.log('idoso')
}

the code gets cleaner and has exactly the same effect.

Answer 2

To stop the code you could involve the function in a try-catch and make a throwwhen he wanted to stop the execution and catch could alert the user of the error. I also advise moving the functionality of getting the image name from gender and age to a separate method, thus making the code more readable and easier to update in the future.

Follow the suggestion below:

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

try {
    //Verificação de dados 
    if (nascimento_valor > ano || nascimento_valor < 1900) {
        throw ('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'

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

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

    var imageName = BuscarImagemPorGeneroEIdade(genero, nascimento_valor);
    imagem.setAttribute('src', imageName)

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

function BuscarImagemPorGeneroEIdade(genero, idade) {

var imageName = '';
if (genero == 'masculino') {

    if (nascimento_valor <= 10) {
        imageName = 'crianca-masculino.jpg';

    } else if (nascimento_valor <= 18) {
        imageName = 'jovem-masculino.jpg';

    } else if (nascimento_valor <= 50) {
        imageName = 'adulto-masculino.jpg';

    } else {
        imageName = 'idoso-masculino.jpg';
    }

} else if (genero == 'feminino') {

    if (nascimento_valor <= 10) {
        imageName = 'crianca-masculino.jpg';            // crianca-masculino ou crianca-feminino??

    } else if (nascimento_valor <= 18) {
        imageName = 'jovem-feminino.jpg';

    } else if (nascimento_valor <= 50) {
        imageName = 'adulto-feminino.jpg';

    } else {
        imageName = 'idoso-feminino.jpg';
    }

return imageName;
}

I also suggest you change the name of the "Check" function. In the code you do checks, changes the image and returns a message to the user, this name besides being very generic, can confuse who read the code.