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?