I cannot create an image in DOM with javascript

Asked

Viewed 52 times

0

<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>
        &copy; 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>
javascript html

  • have already tested ifs to see if the code is accessing the conditions and in this part there is no problem, I checked tbm the image name and extension but even if I change the extension in both parts (in the code and the image file itself) but still can not display the content.

  • 1

    resultado.appendChild('img'); This is wrong, if img is a variable, should not come in quotes

  • I had already tried without the quotation marks and it wasn’t working, so I went through the code where I thought I could be wrong but none of the modifications worked.

2 answers

0

You stated resultado as a constant and is trying to modify.

Also check if it is not necessary to change the relative path as for example './filename' in the src of each image.

  • I’ve checked the image name and it’s correct.

  • images are in the same html directory?

  • before they were in a directory inside the file folder, but I changed this just to make sure that the problem was not this.

0

I found an answer, but I want to know from a more professional point of view if it is valid, I created the src attribute of the photo with the value " ""before ifs of the images, and when the condition is activated I just changed the value of src.

const Calc = Document.querySelector('div#calculate'); Calc.addeventlistener(click, calculate);

Function calculate(){ var data = new Date(); var year = date.getFullYear(); const anoNascimento = Document.querySelector('input#anoNascimento'); var result =Document.querySelector('div#result');

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

}

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.