zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden js in html funktioniert aber ausgelagert nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.01.2021, 13:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2012
Beiträge: 38
Tertius befindet sich auf einem aufstrebenden Ast
Frage js in html funktioniert aber ausgelagert nicht

Wenn ich den picker1.js code im html code in einem <script> Tag ausführe, dann funktioniert alles.
Lagere ich den code aus als picker1.js und lade die Datei mit <script src="picker1.js"></script>, dann kommt folgender Fehler in der Konsole

Code:
Uncaught TypeError: document.getElementById(...) is null
    <anonymous> file:///C:/Eigene Dateien/Arduino/clock/data/picker1.js:12
    on file:///C:/Eigene Dateien/Arduino/clock/data/iro.min.js:7
    on file:///C:/Eigene Dateien/Arduino/clock/data/iro.min.js:7
    on file:///C:/Eigene Dateien/Arduino/clock/data/iro.min.js:7
    <anonymous> file:///C:/Eigene Dateien/Arduino/clock/data/picker1.js:11
Zeile11:
Code:
demoColorPicker.on(['color:init'], function(color) {
Zeile12:
Code:
document.getElementById('text').style.color = color.hexString;
Hier der picker1.js Code:
Code:
  var demoColorPicker = new iro.ColorPicker("#color-picker-container", {
    width: 250,
    height: 250,
    color: "#FF0000",
    handleRadius : 3,
    wheelLightness : false,
    borderWidth : 1,
    borderColor: '#000000',
  });

  demoColorPicker.on(['color:init'], function(color) {
    document.getElementById('text').style.color = color.hexString; 
    document.getElementById('text').innerHTML = color.hexString; 
    document.getElementById('preview').style.background = color.hexString;           
    console.log("INIT");
  });
  demoColorPicker.on("color:change", function (color, changes) {
    console.log(color.hexString);
    document.getElementById('text').style.color = color.hexString; 
    document.getElementById('text').innerHTML = color.hexString; 
    document.getElementById('preview').style.background = color.hexString;                               
  });
Wie kann ich den js code auslagern ohne das eine Fehlermeldung kommt?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.01.2021, 23:51
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2012
Beiträge: 38
Tertius befindet sich auf einem aufstrebenden Ast
Standard

Ich konnte das Problem selbst lösen.

Wenn ich picker1.js auslagere, dann muss im html stehen
Code:
<body onload="javascript:start();">
Somit wird der js code beim Seitenaufruf ausgeführt.

Und die ausgelagerte picker1.js muss so beginnen:
Code:
function start() {
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.01.2021, 08:04
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 147
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Wahrscheinlich hast du dein <script> im head stehen , richtig ?

Dann könnte es auch reichen wenn du dein <script> am Ende des bodys einfügst , dann brauch es dein onload lösung auch nicht
Mit Zitat antworten
  #4 (permalink)  
Alt 18.01.2021, 18:20
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2012
Beiträge: 38
Tertius befindet sich auf einem aufstrebenden Ast
Standard

Der picker1.js Code stand bisher mitten im html in einem <script> Tag.
Das wollte ich auslagern in eine separate .js datei, da noch mehr js dazu kommt.
Diese Datei lade ich im <head> Bereich mit <script src="picker1.js"></script>

Ohne onload() geht es nicht, da kam der beschriebene Fehler.

Spricht etwas gegen die onload Lösung?
Mit Zitat antworten
  #5 (permalink)  
Alt 19.01.2021, 09:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.093
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Es kommt auf die Reihenfolge drauf an, es ist wichtig ob ein Skript am Anfang oder am Ende steht. Steht es am Anfang dann hat es natürlich keinen Zugriff auf Elemente. Dann kann so etwas wie document.getElementById() nicht funktionieren da es das Element noch gar nicht gibt.

Gegen das "onload" spricht, dass es nicht notwendig ist. Entweder man verlegt die Skripte ans Ende des Dokuments oder noch besser, du schreibst den onload code direkt ins Javascript. Dann funktioniert dein JS auf jeder Seite wo du es einbindest und du musst dich nicht darum kümmern dass ein korrektes onload definiert wurde:

Code:
document.addEventListener("DOMContentLoaded", function() {
  // Alles was in dem Block steht wird bei "onload" ausgeführt, ganz ohne dass etwas im HTML stehen muss. 

  // hier also zb deine Funktionen aufrufen, das lässt sich auch einfach erweitern. 
});
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
HTML Code in CSS Datei crane CSS 3 03.01.2017 15:42
Emails mit txt und HTML Layouter (X)HTML 5 09.11.2015 09:08
Java in HTML einbinden kasbek123 (X)HTML 2 12.07.2015 21:22
per jquery flash entfernen und html anzeigen lassen destroy90210 Javascript & Ajax 2 02.01.2010 18:15
html Quellecode durchsuchen, danach in anderen html Code einfügen? RedTuesday (X)HTML 3 11.08.2009 21:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:21 Uhr.