Age tester

Question

Age tester

Asked 5 years, 4 months ago

Viewed 127 times

-1

I’m developing this application in Javascript to check the age, and change the background color and photo according to the user’s situation. One of the problems I’m having is with the VER button, among other errors that I can’t identify.

function Ver(){
		var nome = window.document.getElementById('camponome').value
		var nasc = window.document.getElementById('camponasc').value
		var res = window.document.getElementById('res')
        var foto = window.document.getElementById('foto')
		var data = new Date()
		var ano = data.getfullyear()
		if (nasc.value.length == 0 || Number(nasc.value) > ano) {
			window.alert('[ERRO] verifique os dados e tente novamente !')
		} else {
		var sexo = window.document.getElementById('radsex').value
		var idade = ano - Number(nasc.value)
		var genero = ''
		if (sexo[0].checked) {
			genero = 'homem'
			if (idade >= 0 && idade <= 3) {
				// bebe
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'blue'
				foto.src = 'img/bebe_menino.jpg'
			} else if (idade >= 4 && idade <= 12) {
				// criança
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'green'
				foto.src = 'img/crianca_menino.jpg'
			} else if (idade >= 13 && idade <= 17) {
				// adolescente
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = '#3f1866'
				foto.src = 'img/adolescente_menino.jpg'
			} else if (idade >= 18 && idade <= 40) {
				// adulto
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = '#757575'
				foto.src = 'img/adulto.jpg'
			} else if (idade >= 41 && idade <= 59) {
				// coroa
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'yellow'
				foto.src = 'img/homem_coroa.jpg'
			} else {
				// idoso
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'red'
				foto.src = 'img/idoso.jpg'
			}
		} else if (sexo[1].checked) {
			genero = 'mulher'
			if (idade >= 0 && idade <= 3) {
				// bebe
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'pink'
				foto.src = 'img/bebe_menina.jpg'
			} else if (idade >= 4 && idade <= 12) {
				// criança
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'green'
				foto.src = 'img/crianca_menina.jpg'
			} else if (idade >= 13 && idade <= 17) {
				// adolescente
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = '#3f1866'
				foto.src = 'img/adolescente_menina.jpg'
			} else if (idade >= 18 && idade <= 40) {
				// adulto
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = '#757575'
				foto.src = 'img/adulta.jpg'
			} else if (idade >= 41 && idade <= 59) {
				// coroa
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'yellow'
				foto.src = 'img/mulher_coroa.jpg'
			} else {
				// idoso
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'red'
				foto.src = 'img/idosa.jpg'
			}
		}
		}

		res.innerHTML = `Olá ${nome} seu sexo é ${genero} com ${idade} anos`
	
	}

body{
			background: black;
		}
		header{
			color: white;
			text-align: center;
            -webkit-text-stroke-width: 0.5px;
            -webkit-text-stroke-color: #000;
            font-size: 1.5em; 
		}
		section{
			background: white;
            text-align: center;
            border-radius: 15px;
            padding: 15px;
            width: 580px;
            height: 390px;
            margin: auto;
            box-shadow: 5px 5px 10px black;
		}
		section #nome{
			position: absolute;
			top: 80px;
			border-radius: 15px;
		}
		section #nasc{
			position: absolute;
			top: 110px;
			border-radius: 15px;
		}
		section #sexo{
			position: absolute;
			top: 80px;
			right: 380px;
		}
		section #Ver{
			position: absolute;
			top: 105px;
			right: 450px;
			margin: 25px auto;
            border-radius: 15px;
            size: 30px;
		}
		section #res{
			position: absolute;
			top: 200px;
			left: 650px;
			
		}
		section #img{
			position: absolute;
			top: 120px;
			left: 280px;
		}
		footer{
			color: white;
			text-align: center;
		}

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Formulario</title>
	<link rel="stylesheet" href="">
	
</head>
<body>
	
	<!-- Cabeçalho -->
<header id="header" class="">
	<p>
	Formulario	
	</p>	
</header>

<section id="formulario">
	
	<p id="nome">
		Nome :
		<input type="text" name="nome" id="camponome">	
	</p>
	<p id="sexo">
		Qua o seu sexo ?
		<input type="radio" name="radsex" value="masc" checked>
			<label for="masc">Masculino</label>
		<input type="radio" name="radsex" value="fem">
			<label for="fem">Feminino</label>
	</p>
	<p id="nasc">
		Ano de nascimento :
		<input type="number" name="camponasc" id="camponasc" min="0">
	</p>
	<div>
		<input type="button" value="verificar" id="Ver" onclick="Ver()">
	</div>
	<p id="img">
		<img src="img/user.jpg" alt="foto" id="foto">
	</p>
	<p id="res">
		Resultado
	</p>

</section>

<footer>
   <p>&copy; SamuelMoreira3</p>	
</footer>

</body>
</html>

1 answer

Browser other questions tagged input

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

by Sam • **79,597** points · Answer 1 · 2019-07-09T17:14:16+00:00

The mistakes are that .getFullYear() is with wrong syntax, everything is in lowercase:

var ano = data.getfullyear()

The other errors is that variable nasc already takes the value and you’re trying to pick up again on if and in the variable idade:

// declaração da variável
var nasc = window.document.getElementById('camponasc').value
                                                         ↑

// o if
if (nasc.value.length == 0 || Number(nasc.value) > ano) {
           ↑                                ↑

// e aqui também
var idade = ano - Number(nasc.value)
                                ↑

Another error is on the line:

var sexo = window.document.getElementById('radsex').value

The radsex are two radios with name="radsex" and not id. Soon you should catch the hair name and not by id:

var sexo = window.document.getElementsByName('radsex')

With these fixes your code will work:

function Ver(){
		var nome = window.document.getElementById('camponome').value
		var nasc = window.document.getElementById('camponasc').value
		var res = window.document.getElementById('res')
        var foto = window.document.getElementById('foto')
		var data = new Date()
		var ano = data.getFullYear()
		if (nasc.length == 0 || Number(nasc) > ano) {
			window.alert('[ERRO] verifique os dados e tente novamente !')
		} else {
		var sexo = window.document.getElementsByName('radsex')
		var idade = ano - Number(nasc)
		var genero = ''
		if (sexo[0].checked) {
			genero = 'homem'
			if (idade >= 0 && idade <= 3) {
				// bebe
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'blue'
				foto.src = 'img/bebe_menino.jpg'
			} else if (idade >= 4 && idade <= 12) {
				// criança
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'green'
				foto.src = 'img/crianca_menino.jpg'
			} else if (idade >= 13 && idade <= 17) {
				// adolescente
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = '#3f1866'
				foto.src = 'img/adolescente_menino.jpg'
			} else if (idade >= 18 && idade <= 40) {
				// adulto
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = '#757575'
				foto.src = 'img/adulto.jpg'
			} else if (idade >= 41 && idade <= 59) {
				// coroa
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'yellow'
				foto.src = 'img/homem_coroa.jpg'
			} else {
				// idoso
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'red'
				foto.src = 'img/idoso.jpg'
			}
		} else if (sexo[1].checked) {
			genero = 'mulher'
			if (idade >= 0 && idade <= 3) {
				// bebe
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'pink'
				foto.src = 'img/bebe_menina.jpg'
			} else if (idade >= 4 && idade <= 12) {
				// criança
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'green'
				foto.src = 'img/crianca_menina.jpg'
			} else if (idade >= 13 && idade <= 17) {
				// adolescente
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = '#3f1866'
				foto.src = 'img/adolescente_menina.jpg'
			} else if (idade >= 18 && idade <= 40) {
				// adulto
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = '#757575'
				foto.src = 'img/adulta.jpg'
			} else if (idade >= 41 && idade <= 59) {
				// coroa
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'yellow'
				foto.src = 'img/mulher_coroa.jpg'
			} else {
				// idoso
				res.innerHTML = `A sua idade é ${idade} anos.`
				document.body.style.background = 'red'
				foto.src = 'img/idosa.jpg'
			}
		}
		}

		res.innerHTML = `Olá ${nome} seu sexo é ${genero} com ${idade} anos`
	
	}

body{
			background: black;
		}
		header{
			color: white;
			text-align: center;
            -webkit-text-stroke-width: 0.5px;
            -webkit-text-stroke-color: #000;
            font-size: 1.5em; 
		}
		section{
			background: white;
            text-align: center;
            border-radius: 15px;
            padding: 15px;
            width: 580px;
            height: 390px;
            margin: auto;
            box-shadow: 5px 5px 10px black;
		}
		section #nome{
			position: absolute;
			top: 80px;
			border-radius: 15px;
		}
		section #nasc{
			position: absolute;
			top: 110px;
			border-radius: 15px;
		}
		section #sexo{
			position: absolute;
			top: 80px;
			right: 380px;
		}
		section #Ver{
			position: absolute;
			top: 105px;
			right: 450px;
			margin: 25px auto;
            border-radius: 15px;
            size: 30px;
		}
		section #res{
			position: absolute;
			top: 200px;
			left: 650px;
			
		}
		section #img{
			position: absolute;
			top: 120px;
			left: 280px;
		}
		footer{
			color: white;
			text-align: center;
		}

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Formulario</title>
	<link rel="stylesheet" href="">
	
</head>
<body>
	
	<!-- Cabeçalho -->
<header id="header" class="">
	<p>
	Formulario	
	</p>	
</header>

<section id="formulario">
	
	<p id="nome">
		Nome :
		<input type="text" name="nome" id="camponome">	
	</p>
	<p id="sexo">
		Qua o seu sexo ?
		<input type="radio" name="radsex" value="masc" checked>
			<label for="masc">Masculino</label>
		<input type="radio" name="radsex" value="fem">
			<label for="fem">Feminino</label>
	</p>
	<p id="nasc">
		Ano de nascimento :
		<input type="number" name="camponasc" id="camponasc" min="0">
	</p>
	<div>
		<input type="button" value="verificar" id="Ver" onclick="Ver()">
	</div>
	<p id="img">
		<img src="img/user.jpg" alt="foto" id="foto">
	</p>
	<p id="res">
		Resultado
	</p>

</section>

<footer>
   <p>&copy; SamuelMoreira3</p>	
</footer>

</body>
</html>