Al transformar el archivo de ts en js y compilarlo, me sale el siguiente mensaje:
ReferenceError: document is not defined
El archivo html es el siguiente el cual tiene tres div el primero en el cual tengo el problema quiero que de una lista que tengo en el archivo ts, se pinten los datos como esta en el select, es decir se pinten cada input con el nombre del array
<!DOCTYPE html>
<html lang="es">
<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>Práctica de los sims</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="containner w-100 h-50 d-flex justify-content-between gap-4 mx-auto py-5 px-5">
<div class="containerNames w-25 h-50">
<select class="form-select" id="seleccionNombres" multiple aria-label="multiple select example">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="containerButtons w-25 d-grid gap-1">
<button type="button" class="btn btn-primary btn-sm">Salon</button>
<button type="button" class="btn btn-primary btn-sm">Cocina</button>
<button type="button" class="btn btn-primary btn-sm">Baño</button>
<button type="button" class="btn btn-primary btn-sm">Dormitorio</button>
</div>
<div class="containerText w-25 h-50 bg-primary">
</div>
</div>
<script src="./AEUT4_01_Práctica_SIMS.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
</body>
</html>
Y en el archivo ts es donde tengo el array con los nombres, que es donde recojo el elemento select para luego según vaya recorriendo el array me cree los input, se inserten los nombres y a su vez, se añada al elemento padre, pero por alguna razón que desconozco me salta el error que he dicho al principio
// const select=(<HTMLInputElement>document.getElementById("seleccionNombres"));
const select=document.getElementById("seleccionNombres") as HTMLSelectElement;
const nombre=[
"Gonzalo","Carlos","Sara","Carolina","Fernando","Pepe"]
const habitaciones = {
"Salon":[
"está viendo la tele en el salón",
"está leyendo en el salón",
"está con su hermana en el salón",
"está descansando en el salón"
],
"Cocina": [
"está cocinando en la cocina",
"está comiendo en la cocina",
"está haciendo un bizcocho en la cocina",
"está fregando en la cocina"
],
"Baño":[
"se está lavando los dientes en el baño",
"se encuentra en la ducha del baño",
"está haciendo sus necesidades en el baño",
"está limpiando el baño"
],
"Dormitorio": [
"está durmiendo en el dormitorio",
"está haciendo tarea en el dormitorio",
"está vistiendose en el dormitorio",
"está escuchando musica en el dormitorio"
]
}
class personas{
nombres : string[];
constructor(nombres : string[]) {
this.nombres = nombres;
}
}
nombre.forEach(objeto => {
let option= document.createElement("option");
option.setAttribute('value',objeto);
option.textContent= objeto;
select.append(option);
});
document is not defined
porque no tiene la referencia y entonces asignanull