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>