0

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);
  });
3
  • ¿Porqué razón estás trabajando con elementos propios del navegador en un fichero de Typescript y sin ningún framework o librería aparente? el 13 ene. a las 17:27
  • 1
    Parece que necesitas de alguna forma incluir el script (archivo ts) en el html, puesto que ese error de TS nos dice que document is not defined porque no tiene la referencia y entonces asigna null
    – g.4
    el 13 ene. a las 17:27
  • si tienes razon, no tenia el js el 16 ene. a las 22:52

1 respuesta 1

0

En tu archivo tsconfig.json asegúrate de incluir la librería "dom"

{
    "compilerOptions": {
       // tus settings etc etc 
       "lib": [
          "ES2015",
          "dom"
       ],
       // más settings etc etc 
    }
    "include": [...],
    "exclude": [...]
}

(ES2015 es lo que uso yo, tú puedes usar otro estándar EcmaScript (ES2017, ES2021etc) si prefieres

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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