Beispiel:JS-event-addeventlistener1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Event-Handler registrieren</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<style>
body {
padding: 0 0.3em;
}
main {
padding: 0.5em 1em;
max-width: 40em;
background-color: hsl(210, 50%, 80%);
outline: 1px solid black;
}
label {
display: inline-block;
width: 4em;
}
button {
margin: 1em 0;
padding: 0.7em;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function () {
const addierer = document.querySelector('button[name=addiere]');
addierer.addEventListener('click', handleAddiereKlick);
function handleAddiereKlick() {
const wert1 = document.getElementById("wert1").valueAsNumber;
const wert2 = document.getElementById("wert2").valueAsNumber;
document.getElementById("summe").textContent = wert1 + wert2;
}
});
</script>
</head>
<body>
<h1>Beispiel: Unaufdringliche Event-Handler</h1>
<main>
<p>Die Ereignisbehandlung des nachfolgenden Eingabeformulars wird vollständig
vom JavaScript-Teil übernommen. Der HTML-Teil ist frei von Script-Elementen.
<fieldset>
<legend>Addierer</legend>
<label for="wert1">Wert 1: </label><input id="wert1" type="number"><br>
<label for="wert2">Wert 2: </label><input id="wert2" type="number"><br>
<label for="summe">Summe: </label><output id="summe"></output><br>
<button type="button" name="addiere">Addiere</button>
</fieldset>
</main>
</body>
</html>
