Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

264
Vistas
¿Cómo cambiar la imagen de fondo según el resultado de una API?

función para cambiar la imagen de fondo:

 function backgroundChange(checkDay) { if (checkDay === 0) { document.body.style.backgroundImage = "url('night.jpg')"; } else if (checkDay === 1) { document.body.style.backgroundImage = "url('day.jpg')"; } }

función para obtener resultados de api
api utilizada es: https://rapidapi.com/weatherapi/api/weatherapi-com/ He utilizado la función api meteorológica en tiempo real para axios (js) directamente desde el enlace anterior

 const options = { method: "GET", url: "https://weatherapi-com.p.rapidapi.com/current.json", params: { q: "Los angeles" }, headers: { "X-RapidAPI-Key": "API_KEY", "X-RapidAPI-Host": "weatherapi-com.p.rapidapi.com" } }; var checkDay; axios .request(options) .then(function (response) { console.log("-->", response.data.current.is_day); checkDay = response.data.current.is_day; console.log(checkDay); }) .catch(function (error) { console.error(error); });
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

El mismo código que proporcionaste está funcionando para mí. Verifique que tenga algún componente (y estilo adjunto) configurado que superponga el cuerpo por completo.

Esto es lo que probé, solo cambie API_key y funcionará:

 function getWeatherInfo() { var location = document.getElementById("location").value; var options = { method: "GET", url: "https://weatherapi-com.p.rapidapi.com/current.json", params: { q: location }, headers: { "X-RapidAPI-Key": "API_Key", "X-RapidAPI-Host": "weatherapi-com.p.rapidapi.com", }, }; console.log(options); var checkDay; axios .request(options) .then(function (response) { console.log("-->", response.data.current.is_day); checkDay = response.data.current.is_day; console.log(checkDay); document.getElementById("results").innerHTML = JSON.stringify(response); if (checkDay === 0) { document.body.style.backgroundImage = "url('night.jpg')"; } else if (checkDay === 1) { document.body.style.backgroundImage = "url('day.jpg')"; } }) .catch(function (error) { console.error(error); }); }
 body{ background-color: lightseagreen; } #results{ height:600px; width:100%; background-color: white; }
 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="getWeather.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <h1>Weather</h1> <input id="location" type="text" value="Los Angeles" placeholder="enter location here"> <button onclick="getWeatherInfo()">Get Weather Info</button> <main> <code id="results"></code> </main> </body> </html>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda