17.01.2021, 12:13
|
|||
|
|||
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
Code:
demoColorPicker.on(['color:init'], function(color) {
Code:
document.getElementById('text').style.color = color.hexString;
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;
});
|
| Sponsored Links |
|
17.01.2021, 22:51
|
|||
|
|||
Ich konnte das Problem selbst lösen.
Wenn ich picker1.js auslagere, dann muss im html stehen Code:
<body onload="javascript:start();"> Und die ausgelagerte picker1.js muss so beginnen: Code:
function start() {
|
| Sponsored Links |
|
18.01.2021, 07:04
|
||||
|
||||
|
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
|
|
18.01.2021, 17:20
|
|||
|
|||
|
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?
|
|
19.01.2021, 08:33
|
|||
|
|||
|
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.
});
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| HTML Code in CSS Datei | crane | CSS | 3 | 03.01.2017 14:42 |
| Emails mit txt und HTML | Layouter | (X)HTML | 5 | 09.11.2015 08:08 |
| Java in HTML einbinden | kasbek123 | (X)HTML | 2 | 12.07.2015 20:22 |
| per jquery flash entfernen und html anzeigen lassen | destroy90210 | Javascript & Ajax | 2 | 02.01.2010 17:15 |
| html Quellecode durchsuchen, danach in anderen html Code einfügen? | RedTuesday | (X)HTML | 3 | 11.08.2009 20:24 |
Linear-Darstellung
