HTML, CSS, Javascript EventHandler und .innerText?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test DOM Manipulation</title>
<script src="inner.Text.js" defer></script>
</head>
<body>
<div>
<button id="button">click me</button>
<input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>
</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');
const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";
e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);
const button = document.getElementById('button');
button.addEventListener('click', () => {
button.innerText = "Klicken";}
- Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
- Warum wird das meinBody.append(e1); nicht ausgeführt?
MFG
Sind hier zwei verschiedene Dateien
Eine HTML Datei und eine JavaScript-Datei, die in die HTML-Datei per
<script src="inner.Text.js" defer></script>
eingebunden wird.
1 Antwort
Dein Code sollte in einem Script-Block stehen.
Der Script-Block sollte im "head" stehen, es ist aber üblicherweise auch okai das woanders in das HTML-Dokument zu packen.
Das Script wird beim Laden ausgeführt, du wirst vermutlich eine Fehlermeldung in der Konsole sehen, dass Elemente noch nicht gefunden wurden, da diese noch nicht geladen wurden.
Pack soetwas dazu, dann kann es funktionieren:
document.addEventListener("DOMContentLoaded", init);
Und deinen Initialen Code in eine Funktion namens "init".
Es sei zudem erwähnt, dass das Scoping in JavaScript etwas komisch ist. Du kannst dir üblicherweis enicht sicher sein, dass der Wert in der Variable, die du außerhalb einer Funktion definierst in der Funktion derselbe ist wie zum Definitionszeitpunkt der Funktion (hier "button", wobei ich denke in dem Fall hier funktioniert das).
Es war einfach nur ein Syntax Error
so ist es richtig. Jetzt gehts.