Wetter Widget ohne Standort-Abfrage

  • Hi Leute,


    ich sitze seit ca. 4 Stunden an einem Javascript von einem Wetter Widget und bekomme es einfach nicht hin. Mit html und Css komm ich halbwegs klar aber bei Java hab ich Schwierigkeiten...

    Kurz erklärt: Ich habe ein Wetter Widget mit automatischer Standort-Abfrage. Ich möchte das Widget aber nun fest auf meiner Webseite integrieren und nur das Wetter von meinem Wohnort dort anzeigen lassen (hab auf meiner Webseite Vogefutter-Livestreams aus meinem Garten und die Leute sollen die Temperaturen im Garten sehen können)...

    html-seminar.de/woltlab/attachment/2283/

    Die Location-Abfrage soll also raus und das Widget soll direkt das Wetter ohne Abfrage vom eingetragenen Standort anzeigen (Recke, Deutschland - siehe openweathermap-Link).


    Wie gesagt, hab ich schon versucht die Abfrage raus zunehmen - dann funktionierte aber das ganze Widget nicht mehr. Ich mach also irgendwas falsch.
    Kann mir da jemand weiterhelfen? Bin für jede noch zu kleine Hilfe sehr dankbar.


    Gruß Thomas

  • Ich habe dein Skript mal auf das notwendigste reduziert und dann funktioniert es einwandfrei:

    In deinem Skript ist jedoch die Standortabfrage noch drin. Soll das jetzt die Version vor oder nach dem Umbau sein?

  • Hallo Sempervivum,


    erstmal vielen vielen Dank für deine Antwort und deine Zeit.
    Mein Code ist leider noch mit Standort-Abfrage, weil ich sie nicht raus bekomme ohne dass alles "kaputt" geht.

    Ich habe deinen Code gerade ausprobiert. Die Standort-Abfrage ist zwar weg aber die Wetter-Anzeige bleibt leer :(
    Hast du da noch ne Idee?

  • Sieh genau hin, ich habe, um es leicht testen zu können, das Eintragen in die HTML-Elemente auskommentiert und die Daten statt dessen in die Console geschrieben:

    Code
            function displayWeather() {
                console.log(weather);
                // iconElement.innerHTML = `<img src="icons/${weather.iconId}.png" />`;
                // tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
            }

    Wenn Du das wieder rückgängig machst, sollte es funktionieren:

    Code
            function displayWeather() {
                iconElement.innerHTML = `<img src="icons/${weather.iconId}.png" />`;
                tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
            }
  • PS: Ich vermute mal, dass Du einfach die Standortabfrage gelöscht hast. Dann kann es nicht mehr funktionieren, denn die Funktion getWeather wird in setPosition aufgerufen und diese ist wieder ein Callback bei der Standortabfrage in Zeile 15. D. h. das einzige, was Du tun musst, ist die Funktion getWeather() am Ende des Skripts aufzurufen.

  • Ok :)


    Ich habe aktuell dieses Javaskript


    und die html, ist diese hier:



    Dank dir

  • Ich denke, ich sehe wo es noch hakt: Du brauchst noch die Elemente für die Anzeige, d. h. dieses:

    Code
    // SELECT ELEMENTS
    const iconElement = document.querySelector(".weather-icon");
    const tempElement = document.querySelector(".temperature-value p");

    am Anfang des Skriptes.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!