0

¿Por qué en este código Javascript no puedo hacer que funcione el select ni tampoco funciona el ciclo for... of para colocar los valores correspondientes al select? Se trata de que la variable optionEmpleado sea el select y no encuentro como hacerlo andar...

"use strict"
// Declaración de variables del HTML
const nombre = document.querySelector('.c8__nombre');
const edad = document.querySelector('.c8__edad');
const submit = document.querySelector('.c8__submit');
const readonly = document.querySelector('.c8__readonly');

const empleados = []

class Empleado {
    constructor(nombreValue, edadValue) {
        this.nombre = nombreValue;
        this.edad = edadValue;
    }
}

// Push y validación del array Empleado
submit.addEventListener('click', function (e) {
    let nombreValue = document.querySelector('.c8__nombre').value;
    const edadValue = document.querySelector('.c8__edad').value;
    e.preventDefault();
    if (!isNaN(edadValue)) {
        empleados.push(new Empleado(nombreValue, edadValue))
    } else {
        alert(`Por favor, ingrese una edad válida.`)
    }
});

// Incorporando elementos HTML desde Javascript


let optionEmpleado = document.getElementById('c8__select');

for (const empleado of empleados) {
    optionEmpleado.innerHTML += "<option>" + empleado + "</option>"
}





<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body class="c8__body">
    <div class="c8__container">
        <form class="c8__formulario">
            <h1 class="c8__title">Lista de empleados</h1>
            <input type="text" class="c8__nombre" placeholder="Ingrese el nombre de su empleado">
            <input type="text" class="c8__edad" placeholder="Ingrese la edad de su empleado">
            <input type="submit" class="c8__submit" value="Enviar datos del empleado">
            <select name="" id="c8__select" class="c8__select"> </select>
            <input class="c8__readonly" type="text" readonly>
        </form>
    </div>
    <script src="app.js"></script>
</body>

</html>
3
  • Siempre olvidas adjuntar tu HTML. el 23 sep. 2021 a las 17:35
  • Hola creo que tu problema es que esta usando querySelector si estas trabajando con clase y tienes mas de una con ese nombre seleccionara el primero o solo no te seleccionara nada por eso te recomiendo ocupar querySelectorAll esto te genera el arreglo te recomiendo leer este post sobre los queryselector
    – Trapss
    el 23 sep. 2021 a las 19:06
  • Esta vez no se me olvidó adjuntar el código @JaimeMenéndez sino se me olvidó formatearlo como tal en la publicación y aunque estaba guardado, no se publicaba por esa razón el 23 sep. 2021 a las 19:18

1 respuesta 1

1

Tienes varios errores. Actualmente el ciclo for que tienes al final solo se ejecuta una sola vez, nunca más vuelve a ejecutarse, por lo que no te va a agregar elementos al select.

Tampoco necesitas iterar en el array de empleados cada vez que agregues uno nuevo. Con agregar el nuevo basta.

Te adjunto los tu código arreglando esos detalles que te menciono:

const nombre = document.querySelector('.c8__nombre');
const edad = document.querySelector('.c8__edad');
const submit = document.querySelector('.c8__submit');
const readonly = document.querySelector('.c8__readonly');
let optionEmpleado = document.getElementById('c8__select');
const empleados = []

class Empleado {
    constructor(nombreValue, edadValue) {
        this.nombre = nombreValue;
        this.edad = edadValue;
    }
}

// Push y validación del array Empleado
submit.addEventListener('click', function (e) {
    let nombreValue = nombre.value;
    const edadValue = edad.value;
    
    e.preventDefault();
    if (!isNaN(edadValue) && nombreValue) {
        let empleado = new Empleado(nombreValue, edadValue)
        empleados.push(empleado)
        optionEmpleado.innerHTML += "<option>" + empleado.nombre + "</option>"
    } else {
        alert(`Por favor, ingrese una edad y un nombre válidos.`)
    }
});

optionEmpleado.addEventListener('change', ()=>{
  let i = optionEmpleado.selectedIndex;
  if(i>0)
    readonly.value = `Esta persona tiene ${empleados[i-1].edad} años`
  else
    readonly.value = ''
})
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clase 5</title>
</head>

<body class="c8__body">
    <div class="c8__container">
        <form class="c8__formulario">
            <h1 class="c8__title">Lista de empleados</h1>
            <input type="text" class="c8__nombre" placeholder="Ingrese el nombre de su empleado" required>
            <input type="text" class="c8__edad" placeholder="Ingrese la edad de su empleado">
            <input type="submit" class="c8__submit" value="Enviar datos del empleado">
            <select name="" id="c8__select" class="c8__select"><option></option> </select>
             <input class="c8__readonly" type="text" readonly>
        </form>
    </div>
    <script src="app.js"></script>
</body>

</html>

2
  • gracias @JaimeMenéndez adicionalmente lo que quiero es que después de que el usuario ingrese los nombres, si selecciona en el Select tal nombre que aparezca en un input: "Esta persona tiene "x" edad que ingreso*. Eso entiendo que lo tengo que hacer con un if, pero ¿Cómo determino que cuando un nombre se selecciona aparezca los datos de esa persona? let nombreOption = document.getElementsByClassName('c8__submit').value; if (nombreOption == ) porque no sé de donde sacar el parámetro del if.. ¿me explico? el 24 sep. 2021 a las 1:48
  • 1
    @OtroMasComoTu edité mi respuesta para agregar lo que me comentas. Checa si es eso lo que querías. el 24 sep. 2021 a las 2:23

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.