0

Tengo el siguiente código en donde quiero consumir la API de WeatherMap para un ejercicio. El problema es que no consigo averiguar por qué me da ReferenceError, document is not defined a la hora de acceder a document.getElementsByClassName("opcion").

Pensaba que era por la funcion async pero si borro todas las funciones y solo dejo la declaración de variables tampoco lo identifica. He estado viendo opciones como if (typeof document !== "undefined") y otras similares con document pero no me resultan ni me aclaran donde radica el problema.

var opcion=document.getElementsByClassName("opcion");
var boton=document.getElementById("submit");
var madrid=opcion[1].value;
var valencia=opcion[2].value;
var sevilla=opcion[3].value;

function establecerUrl(){
    let url;
    switch(opcion){
       
        case madrid:
             url=`http://api.openweathermap.org/data/2.5/forecast?id=${madrid}&appid={key}`;
           
            break;
        case valencia:
             url=`http://api.openweathermap.org/data/2.5/forecast?id=${valencia}&appid={key}`;
            
            break;
        case sevilla:
             url=`http://api.openweathermap.org/data/2.5/forecast?id=${sevilla}&appid={key}`;
            break;
        default:
           break;

}
return url;
}

async function obtenerTiempo(){
   
   let url=establecerUrl();

    try{
        const respuesta= await fetch(url);
        
        if(respuesta.status === 200){
         const datos= await respuesta.json();
         console.log(datos);
 
 
        }

     }catch(error){
         console.log(error);
     }
    
   }
<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <main>
        <section class="container">
            <div class="form-container">
                <form class="form">
                    <h1>EL TIEMPO EN TUS MANOS</h1>
                    <select name="ciudades" id="ciudades">
                        <option class="opcion" value="">Selecciona ciudad</option>
                        <option class="opcion" value="3117735">Madrid</option>
                        <option class="opcion" value="2509951">Valencia</option>
                        <option class="opcion" value="2510911">Sevilla</option>
                    </select>
                    <input type="button" value="Ver" id="submit" >
                </form>
               
            </div>
        </sectionclass>
    </main>
    <script src="consumoApi.js"></script>
</body>
</html>

1 respuesta 1

1

En el código, hay 5 declaraciones de variables y 2 declaraciones de funciones.
Sin llamada de función.

Y el botón del form no hace nada.

Mira el addEventListener... Tambien, yo simplifiqué la función establecerUrlpara usar la opción seleccionada en un url.

const boton = document.getElementById("submit");

// No conozco una buena clave para esta API. Definitivamente habrá un error.
const key = 1234567890

function establecerUrl() {
  // encontrar el valor seleccionado en el select
  const opcionSeleccionada = document.querySelector("form select").value
  // Si el valor está vacío... no hacemos nada.
  if(opcionSeleccionada === ""){
    return null
  }
  
  // Si hay un valor, devolvemos la url
  return `http://api.openweathermap.org/data/2.5/forecast?id=${opcionSeleccionada}&appid=${key}`;
}

async function obtenerTiempo() {
  let url = establecerUrl();
  console.log(url)
  
  // Si tenemos una buena url
  if(url){
    try {
      const respuesta = await fetch(url);

      if (respuesta.status === 200) {
        const datos = await respuesta.json();
        console.log(datos);
      }
    } catch (error) {
      console.log(error);
    }
  }
}

// Para detectar el clic
boton.addEventListener("click", obtenerTiempo)
<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <main>
        <section class="container">
            <div class="form-container">
                <form class="form">
                    <h1>EL TIEMPO EN TUS MANOS</h1>
                    <select name="ciudades" id="ciudades">
                        <option class="opcion" value="">Selecciona ciudad</option>
                        <option class="opcion" value="3117735">Madrid</option>
                        <option class="opcion" value="2509951">Valencia</option>
                        <option class="opcion" value="2510911">Sevilla</option>
                    </select>
                    <input type="button" value="Ver" id="submit" >
                </form>
               
            </div>
        </sectionclass>
    </main>
    <script src="consumoApi.js"></script>
</body>
</html>

5
  • gracias. Obviamente mucho mejor el Código. En un inicio si tenía llamada a la función y el addEventListener para el botón pero aún así me sale referenceError al cargar el document. Lo puse así para simplificar ya que lo que me interesa es saber por qué da este error y aún como tu dices lo daba.
    – Jose L.
    Commented el 26 dic. 2022 a las 9:26
  • No sé. Tal vez el mensaje de error completo ayudaría. Commented el 26 dic. 2022 a las 19:29
  • ReferenceError: document is not defined at Object.<anonymous> (C:\Users\matem\Desktop\Desarrollo WEB\2 curso\Web_Entorno_Cliente\JavaScript\EjercicioAPI\consumoApi.js:1:12) at Module._compile (node:internal/modules/cjs/loader:1126:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10) at Module.load (node:internal/modules/cjs/loader:1004:32) at Function.Module._load (node:internal/modules/cjs/loader:839:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) at node:internal/main/run_main_module:17:47
    – Jose L.
    Commented el 27 dic. 2022 a las 21:47
  • @Louis Patrice Bessete Realmente el problema está en VS code. Creo que es por node.js. No reconoce el document y no me deja hacer debug tampoco. En Live server funciona correctamente y no marca nada en consola
    – Jose L.
    Commented el 27 dic. 2022 a las 22:07
  • Entonces, um... No estoy seguro de cómo lidiar con node.js. ¿Está resuelto tu problema? En caso afirmativo, acepte la respuesta (marca de verificación verde). Commented el 30 dic. 2022 a las 2:03

Tu Respuesta

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

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