Problems with multiple IF conditions - Javascript

Question

Talk, people. Beauty ?

I opened a topic yesterday to try to find a solution, however, ended up ending the topic unintentionally.

Well.... My little program has the following function, it takes the year of birth and sex, soon after, it returns with a text and a photo referring to age. The problem is in IF conditions, because it takes the year and does not return the correct IMG. In addition, I tried to make another version of the.js file to try to validate the inputs correctly, but I think it’s getting kind of buzzed kkkk

Any suggestions for a dev. that is starting now with Javascript ?

NOTE: This program is almost the same as Gustavo Guanabara’s Youtube Video Course

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 to the Github repository: https://github.com/MatheusDourado/Calculadora-de-idade

Answer 1

My answer is low quality sorry. Cell phone usage.

Suggestions: Create age group function and returns a value. Create a gender function and returns whether it is male or female.

Solution: Change date of birth to age variable.

If I’ve been wrong Function return Undefined, if it doesn’t continue the events.

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;

    var idade;
    //Verificação de dados 
    if (nascimento_valor > ano || nascimento_valor < 1900) {
        alert('Por Favor verifique os dados de nascimento !!!');
        return;
    } else {
        idade = Number(ano - nascimento_valor);
    }
    //Recebendo e convertendo os valores
    var genero = _sexo(sexo);
    if (genero === undefined) {
        alert("Sexo indefinido. Por favor marque um sexo !!!");
        return;
    }
    var faixa_etaria = FaixaEtaria(idade);
    if (faixa_etaria === undefined) {
        alert("Idade incorreta");
        return;
    }
    // criando os atributos
    imagem.setAttribute('src', `${faixa_etaria}-${genero}.jpg`);
    //Recebendo o texto dinamicamente
    texto.innerText = `Você nasceu em ${nascimento_valor}, tem ${idade} anos e gênero ${genero}`;
    texto.appendChild(imagem);
}
function _sexo(f0) {
    // f0 = sexo;
    if (f0[0].checked) {
        return "masculino";
    }
    if (f0[1].checked) {
        return "feminino";
    }
}
function FaixaEtaria(f0) {
    // f0 = idade;
    if (f0 >= 0 && f0 <= 10) {
        return "crianca";
    }
    if (f0 >= 11 && f0 <= 18) {
        return "jovem";
    }
    if (f0 >= 19 && f0 <= 50) {
        return "adulto";
    }
    if (f0 > 50) {
        return "idoso";
    }
}

Answer 2

Suggestion.

I created two other small methods to improve the organization.. verificaGenero() and verificaFaixaEtaria()

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

  // * Define o gênero
  var genero = verificaGenero(sexo)

  // * Define a faixa etaria
  var faixaEtaria = verificaFaixaEtaria(nascimento_valor)

  // * Cria a imagem
  imagem.setAttribute('src', `${faixaEtaria}-${genero}.jpg`)


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

function verificaGenero(sexo) {
  if (sexo[1].checked ) return 'feminino'
  return 'masculino'
}

function verificaFaixaEtaria(nascimento) {
  if (nascimento_valor >= 10) return 'jovem'
  if (nascimento_valor >= 18) return 'adulto'
  if (nascimento_valor >= 17) return 'jovem'
  if (nascimento_valor >= 51) return 'idoso'
  return 'crianca'
}