SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:JS-element-getElementsByName.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Document.getElementsbyName</title>
<style>
main {
background: #c4ced3;
border-color: #8a9da8;
}
h2 {
color: white;
font-size: 200%;
}
form {width: 11em; }
label {display:block; width: 6em;}
button span {font-weight: bold;}
</style>
<script>
'use strict';
(function () {
function init() {
var button = document.getElementById('button');
button.addEventListener('click', auswerten);
var resett = document.getElementById('resett');
resett.addEventListener('click', löschen);
}
function auswerten() {
if ( document.getElementsByName('Zutat')[0].checked ) {
var text = 'Sie haben schon Käse gewählt!';
}
else {
var text = 'Käse gehört dazu! Wir haben ihn noch hinzugefügt.';
document.getElementsByName('Zutat')[0].checked = true;
}
document.getElementById('kommentar').textContent = text;
}
function löschen () {
document.getElementById('kommentar').textContent = '';
}
document.addEventListener('DOMContentLoaded',init);
}());
</script>
</head>
<body id="seite">
<h1>Document.getElementsbyName()</h1>
<main>
<h2><span style="color:#c32e04;">Pizza</span> nach <span style="color:#5a9900;">Wahl!</span></h2>
<form name="Formular">
<label><input type="checkbox" name="Zutat" value="Käse"> Käse </label>
<label><input type="checkbox" name="Zutat" value="Tomaten"> Tomaten </label>
<label><input type="checkbox" name="Zutat" value="Schinken"> Schinken </label>
<label><input type="checkbox" name="Zutat" value="Salami"> Salami </label>
<label><input type="checkbox" name="Zutat" value="Pilze"> Pilze </label>
<label><input type="checkbox" name="Zutat" value="Oliven"> Oliven </label>
<button type="reset" id="resett">Auswahl<br><span>löschen</span></button>
<button type="button" id="button">Auswahl<br><span>bestellen</span></button>
</form>
<p id="kommentar"></p>
</main>
</body>
</html>
