<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verificador de Idade</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
Verificador de idade
</header>
<section>
<div>
<p>Ano de Nascimento: <input type="text" id="anoNascimento"></p>
<p>sexo:
<input type="radio" name="checkSex" id="masculino" checked>Homem
<input type="radio" name="checkSex" id="feminino" >Mulher
<div id="calcular" >Calcular Idade</div>
</div>
<div id="resultado">preencha os dados a cima para ver o resultado</div>
</section>
<footer>
© Curso em video
</footer>
<script src="script.js" >
var calc = document.querySelector('div#calcular');
calc.addEventListener('click', calcular);
function calcular(){
const data = new Date();
const ano = data.getFullYear();
const anoNascimento = document.querySelector('input#anoNascimento');
var resultado = document.querySelector('div#resultado');
if( anoNascimento.value.length == 0 || anoNascimento.value>ano){
window.alert('Dados incorretos, tente novamente');
}else{
const sex = document.getElementsByName('checkSex');
const idade = ano - Number(anoNascimento.value);
var genero = '';
resultado.innerHTML = `Idade calculada: ${idade}`;
var img = document.createElement(img);
img.setAttribute('id', 'foto');
if(sex[0].checked){
genero='homem';
if(idade>=0 && idade<10){
img.setAttribute =('src', 'criancaMasculino.jpg');
}else if(idade<20){
img.setAttribute=('src','adolescenteMasculino.jpg');
}else if(idade<50){
img.setAttribute=('src', 'adulto.jpg');
}else{
img.setAttribute=('src', 'idoso.jpg');
}
}else if(sex[1]){
genero='mulher';
if(idade>=0 && idade<=10){
img.setAttribute=('src', 'criancaFeminino.jpg');
}else if(idade<20){
img.setAttribute=('src', 'adolescenteFeminino.jpg');
}else if(idade<50){
img.setAttribute=('src', 'adulta.jpg');
}else{
img.setAttribute=('src', 'idosa.jpg');
}
}
resultado.innerHTML=`Detectamos ${genero} com ${idade} anos.`;
}
resultado.appendChild(img);
}
</script>
</body>
</html>
2 Respostas
Você declarou resultado
como uma constante e está tentando modificar.
Verifica também se não será necessário alterar o caminho relativo como por exemplo './nomedaimagem' no src de cada imagem.
-
-
-
antes elas ficavam em um diretório dentro da pasta do arquivo, mas mudei isso só para ter certeza que o problema não era esse. Commented 15/01/2021 às 3:01
Achei uma resposta, mas quero saber de um ponto de vista mais profissional se ela é valida, eu criei o atributo src da foto com o valor " " antes dos ifs das imagens, e quando a condição é ativada eu só alterei o valor do src.
const calc = document.querySelector('div#calcular'); calc.addEventListener('click', calcular);
function calcular(){ var data = new Date(); var ano = data.getFullYear(); const anoNascimento = document.querySelector('input#anoNascimento'); var resultado =document.querySelector('div#resultado');
if(anoNascimento.value.length==0 || anoNascimento.value > ano){
window.alert('[ERRO] revise os dados e tente novamente');
}else{
var sex = document.getElementsByName('checkSex');
var idade = Number(ano) - Number(anoNascimento.value);
var genero = '';
var img = document.createElement('img');
img.setAttribute('id', 'foto');
img.setAttribute('src', '');
if(sex[0].checked){
genero = 'homem';
if(idade>=0 && idade<10){
img.src=('imagem/masculino/crianca.jpeg');
}else if (idade<19){
img.src=('imagem/masculino/adolescente.jpeg');
}else if (idade<50){
img.src=('imagem/masculino/adulto.jpeg');
}else{
img.src=('imagem/masculino/idoso.jpeg');
}
}else if(sex[1].checked){
genero = 'mulher';
if(idade>=0 && idade<10){
img.src=('imagem/feminino/crianca.jpeg');
}else if (idade<19){
img.src=('imagem/feminino/adolescente.jpeg');
}else if (idade<50){
img.src=('imagem/feminino/adulto.jpeg');
}else{
img.src=('imagem/feminino/idoso.jpeg');
}
}
resultado.innerHTML = `Detectamos ${genero} de ${idade} anos.`;
resultado.appendChild(img);
}
}
resultado.appendChild('img');
isso está errado, seimg
é uma variável, não deveria vir entre aspas