I should start by asking how many people are in the family group. Create as many inputs+labels as there are people to complete the age of each member. When clicking on "calculate", show in a pre-existing element the oldest, youngest and average of the family group. But I have this errorUncaught SyntaxError: Invalid or unexpected token
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tarea Clase 6</title>
</head>
<body>
<label>Número de integrantes</label>
<input type="number" placeholder="Ingresa la cantidad" id="cantidadFamiliares">
<label>Ingresar</label>
<button type="button" id="boton-ingresar">Ingresar cantidad</button>
<div>
</div>
<button type="button" id="boton-calcular">Calcular</button>
<p><em id="mayor"></em></p>
<p><em id="menor"></em></p>
<p><em id="promedio"></em></p>
<script type="text/javascript" src="tarea-clase-6.js"></script>
</body>
</html>
const nodoDiv = document.querySelector('div');
function crearNodos(cant) {
const nodoDiv = document.querySelector('div');
for (let i=0; i < cant; i++) {
const nuevoLavel = document.createElement('label');
const textoLavel = document.createTextNode(`Edad integrante n° ${i+1}`);
nuevoLavel.appendChild(textoLavel);
nodoDiv.appendChild(nuevoLavel);
const nuevoInput = document.createElement('input');
nuevoInput.placeholder = 'Ingresa la edad aquí';
nodoDiv.appendChild(nuevoInput);
}
}
function calcularMenorMayor(arr) {
let max = arr[0];
let min = arr[0];
for (let i=0; i < arr.length; i++) {
if (max <= arr[i]) {
max = arr[i];
}
if (min >= arr[i]) {
min = arr[i];
}
}
}
function calcularPromedio(arr) {
let suma = 0;
let promedio = 0;
for (let i=0; i < arr.length; i++) {
suma += arr[i];
promedio = suma/arr.length;
}
}
const botonIngreso = document.querySelector('#boton-ingresar');
botonIngreso.onclick = function() {
const cantidadFamilia = Number(document.querySelector('#cantidadFamiliares').value);
crearNodos(cantidadFamilia);
}
const botonCalcular = document.querySelector('#boton-calcular');
botonCalcular.onclick = function() {
const edades = document.querySelectorAll('input');
let arrayEdades = [];
for (let i=1; i<edades.length; i++) {
arrayEdades.push(Number(edades[i].value));
}
calcularMenorMayor(arrayEdades);
calcularPromedio(arrayEdades);
document.querySelector('#mayor').innerText = `La mayor edad es ${max}`;
document.querySelector('#menor').innerText = `La menor edad es ${min}`;
document.querySelector('#promedio').innerText = `El promedio de edades es ${promedio}`;
}
You need to declare the variables max, min and average as global like so:
The problem is that the variables
min, max, promedio
are not in the context of theonclick
.To avoid declaring those variables as global, you can return the values from functions, so you only use them when you need them.
In that case, from
calcularMenorMayor()
you can return an object with the largest and smallest. So the call would be like this:And to get each data:
minMax.min
andminMax.max
Instead, from
calcularPromedio()
you can return the average, retrieving it in the context:For example:
Variable Scoping Recommendations
Let me make a recommendation about the scope of variables. I would declare in the global scope of the DOM all references to the elements , while the variables as I would
min, max, promedio
return from their functions.The problem is that every time you make calls of the type
document.querySelector('#mayor').innerText
you make a query to the DOM so that it selects that element and at the same time you modify it. The same is true if you were to get its value withvalue
. It's better to create the reference once with something like:const elMayor=document.querySelector('#mayor');
in the global scope and then if you need to modify that element anywhere, useelMayor.innerText="Texto"
. In other words, something similar to what you do withnodoDiv
.