¿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>
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 ocuparquerySelectorAll
esto te genera el arreglo te recomiendo leer este post sobre los queryselector