JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Zufallsgenerator</h1>
<input type="text" id="teilnehmer" placeholder="Name des Teilnehmers"/>
<button id="knopf">Steemian hinzufügen</button>
<h2>Teilnehmerliste</h2>
<ul id="teilnehmerliste"></ul>
<button id="loeschen">Liste leeren</button>
<h2>Ermittlung der Gewinner</h2>
<input type="text" id="anzahlGewinner" placeholder="Anzahl Gewinner"/>
<button id="ermitteln">Gewinner ermitteln</button>
CSS
.delete {
padding-left:20px;
cursor:pointer;
}
JavaScript
var teilnehmerliste = [];
knopf.addEventListener("click", function(){
// feld holen
var eingabefeld = document.getElementById("teilnehmer");
var wert = eingabefeld.value;
// feld leeren
eingabefeld.value = "";
// wenn wert nicht leer, in liste eintragen!
if (wert != "") {
teilnehmerliste.push(wert);
}
// liste darstellen
stelleListedar();
});
var loeschenknopf = document.getElementById("loeschen");
loeschenknopf.addEventListener("click", function(){
listeLeeren();
});
function listeLeeren() {
teilnehmerliste = [];
sichtbareListeLeeren();
}
function sichtbareListeLeeren () {
var guiTeilnehmerliste = document.getElementById("teilnehmerliste");
while (guiTeilnehmerliste.firstChild) {
guiTeilnehmerliste.removeChild(guiTeilnehmerliste.firstChild);
}
}
function loescheEintrag (index) {
teilnehmerliste.splice(index, 1);
stelleListedar();
}
function stelleListedar() {
// ul liste holen
var guiTeilnehmerliste = document.getElementById("teilnehmerliste");
// ul liste leeren
while (guiTeilnehmerliste.firstChild) {
guiTeilnehmerliste.removeChild(guiTeilnehmerliste.firstChild);
}
// ul liste füllen
for (var i=0; i < teilnehmerliste.length; i++) {
var li = document.createElement("li");
var textKnoten = document.createTextNode(teilnehmerliste[i]);
li.appendChild(textKnoten);
// remove x an li hängen
var span = document.createElement("span");
var txt = document.createTextNode("x");
span.className = "delete";
span.appendChild(txt);
li.appendChild(span);
// li mit data index ausstatten
li.setAttribute('data-array-index', i);
// li in gui platzieren
guiTeilnehmerliste.appendChild(li);
}
// deletes funktion anhängen
var deletes = document.getElementsByClassName("delete");
for (var j = 0; j < deletes .length; j++) {
deletes [j].onclick = function() {
var eintrag =...