Js Funktion funktioniert nicht?
Ich bekomme immer diese Fehlermeldung: Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')
at OnClick ((Index):16:25)
at HTMLButtonElement.onclick ((Index):33:33)
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
const TextElement = document.getElementById("text");
function OnClick() {
TextElement.setAttribute('style', 'color: red;');
}
</script>
<style>
#text {
color: black;
}
</style>
</head>
<body>
<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, et placeat, asperiores reprehenderit praesentium esse possimus quia sed tempore, unde autem illo. Illum, voluptate laboriosam. Doloribus unde mollitia necessitatibus dicta?</div>
<button onclick="OnClick()">button</button>
</body>
</html>
Danke
2 Antworten
Das script wird ausgeführt, noch bevor der Body geladen wurde. Dementsprechend ist document.getElementById("text") und somit die Variable TextElement null.
Entweder du plazierst das Script am Ende des Bodys, oder
du tust alles (also auch das Erstellen der Variable) in die Funktion
function OnClick() {
const textElement = document.getElementById("text");
textElement.setAttribute('style', 'color: red;');
}
Kann mich der Antwort von MrAmazing2 nur anschließen, der Code wird ausgeführt, bevor das Element <button onclick="OnClick()">button</button> erstellt wird, daher wird es vom Dokument nicht gefunden.
Entweder wie von MrAmazing2 beschrieben den Code am Ende des body Tags setzen (das kannst du generell immer machen, außer du implementierst externe Scripte wie z.B. Google Analytics/Google Tag Manager,...).
Nochmal kurzes Coaching von mir:
Problem ist folgender Code:
const TextElement = document.getElementById("text");
Du rufst hier ein Element auf, das bisher noch gar nicht existiert (Code wird ausgeführt, bevor das div erstellt wird <div id="text">)
Würdest du den const in die onClick funktion mit reinpack, würde der Fehler nicht kommen, da das const erst erstellt wird, wenn du den button klickst (den Button siehst du erst, wenn das Dokument fertig geladen ist, somit existiert auch der div text.
Lösungen:
- Script weiter runter packen (funktioniert, ist aber nicht die optimale Lösung)
- den const in die onClick Funktion packen
- einen DOM Eventlistener hinzufügen, dann wird der Code erst nach vollständiger Erstellung des DOMs erstellt (falls du nicht weis was ein DOM ist, bitte googlen was das ist).
let TextElement;
document.addEventListener("DOMContentLoaded", function() {
TextElement = document.getElementById("text");
});
Wichtig zu 3: Du musst die Variablet (let) außerhalb der Funktion deklarieren, nicht in der Funktion.
Du kannst const wie in dem Beispiel nicht verwenden, da du nach der Deklaration von const den Wert nicht mehr ändern kannst (mit let und var geht das, benutzte aber let anstatt var, beide funktionieren gleich, nur ist var veraltet und bietet einige Funktionen nicht).
Außerdem würde ich dir folgenden Code nicht mehr empfehlen (fett markiert):
<button onclick="OnClick()">button</button>
Das ist veraltet, benutzte hierfür EventListener (hier mal ne Übersicht welche es gibt https://developer.mozilla.org/de/docs/Web/Events ).
Textfarbe ändern:
Das kannst du auch einfacher programmieren:
element.style.color = "red";
Habe deinen Code mal überarbeitet wie er optimal aussehen sollte:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#text {
color: black;
}
</style>
</head>
<body>
<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, et placeat, asperiores reprehenderit praesentium esse possimus quia sed tempore, unde autem illo. Illum, voluptate laboriosam. Doloribus unde mollitia necessitatibus dicta?</div>
<button id="btn">button</button>
<script>
let TextElement;
document.addEventListener("DOMContentLoaded", function () {
TextElement = document.getElementById("text");
});
document.getElementById("btn").addEventListener("click", function () {
TextElement.style.color = "red";
});
</script>
</body>
</html>
Oder mit gekürztem Code:
<script>
document.getElementById("btn").addEventListener("click", function () {
document.getElementById("text").style.color = "red";
});
</script>
Und hier noch ne coole Funktion, um wieder auf eine schwarze Farbe zu wechseln:
<script>
document.getElementById("btn").addEventListener("click", function () {
if (document.getElementById("text").style.color !== "red") {
document.getElementById("text").style.color = "red";
} else {
document.getElementById("text").style.color = "black";
}
});
</script>
Ich hoffe das hilft dir weiter, falls du Fragen hast kannst du sie mir gern stellen :)