• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Elemente aus einer Liste löschen & Liste sortieren

M

MatzeAusNRW

New member
Guten Abend,

zunächst: Ich bin, was JS angeht, noch Anfänger. Ich lerne es jetzt seit 6 Monaten und stoße immer wieder auf Probleme, die mich tagelang beschäftigen. So auch diese beiden Probleme. Ich hoffe, Ihr könnt mir dabei etwas helfen.

Ich schreibe gerade ein Script, welches Schulfächer in eine Liste einfügen soll. Nun möchte ich aber, dass die Schulfächer in der Liste bei Hinzufügen alphabetisch sortiert werden. Ich denke, der Schlüssel hierzu ist array.sort();, aber leider weiß ich nicht, wo und wie genau ich array.sort(); einbinden soll. Ich würde außerdem gerne die Listenelement in der Liste mit einem Klick auf den Button "X" löschen wollen. Hierzu habe ich eine Funktion angelegt, die "loescheFach();" heißt. Wenn ich diese Funktion nun aber an die Schulfach-Elemente hänge, werden bei Klick auf ein einziges X alle Elemente gelöscht anstatt nur ein einziges Element.

Hier ist mein Code (HTML & JavaScript):

HTML: 
<!DOCTYPE html>
<html>
<head>
	<title>Schulfächer</title>
	<meta charset="utf-8"/>
	<script src="schulfach.js"></script>
</head>
<body onload="zeigeSchulfaecher();">
	<h2>Schulfächer</h2>
	<div id="schulfaecher">
	</div>
	<h2>Liste</h2>
	<ul id="schulfaecher_liste">
	</ul>
</body>
</html>

Code: 
var schulfaecher = ["Mathe", "Deutsch", "Englisch", "Sport"];

function zeigeSchulfaecher() {
	document.getElementById("schulfaecher").innerHTML += 
	schulfaecher[0] + "<button onclick='fuelleListeMitMathe();'>in Liste einfügen</button><br/>" +
	schulfaecher[1] + "<button onclick='fuelleListeMitDeutsch();'>in Liste einfügen</button><br/>" +
	schulfaecher[2] + "<button onclick='fuelleListeMitEnglisch();'>in Liste einfügen</button><br/>" +
	schulfaecher[3] + "<button onclick='fuelleListeMitSport();'>in Liste einfügen</button><br/>";
}	


function fuelleListeMitMathe() {
	document.getElementById("schulfaecher_liste").innerHTML += "<li>" + schulfaecher[0] + " " + "<button onclick='loescheFach();'>X</button></li>";
}

function fuelleListeMitDeutsch() {
	document.getElementById("schulfaecher_liste").innerHTML += "<li>" + schulfaecher[1] + " " + "<button onclick='loescheFach();'>X</button></li>";
}

function fuelleListeMitEnglisch() {
	document.getElementById("schulfaecher_liste").innerHTML += "<li>" + schulfaecher[2] + " " + "<button onclick='loescheFach();'>X</button></li>";
}


function fuelleListeMitSport() {
	document.getElementById("schulfaecher_liste").innerHTML += "<li>" + schulfaecher[3] + " " + "<button onclick='loescheFach();'>X</button></li>";
}

function loescheFach() {
	document.getElementById("schulfaecher_liste").innerHTML = "";
}

Ich hoffe, dass ich mich hier richtig ausgedrückt habe und dass Ihr mir helfen könnt.

Edit: Ich habe versucht, ein jfiddle für das Script zu erstellen, allerdings wird mir nach "Run" nichts ausgegeben.

Danke Euch,
Matze
 
Zuletzt bearbeitet:
Mit innerHTML wirst du dich da schwer tun. Die Sortierung und auch das Entfernen ist damit viel schwieriger als nötig. Wenn du mit den DOM-Methoden (document.createElement(), NODE.insertBefore(), ...) arbeitest, ist das Ganze viel logischer und einfacher.

PS: Für jedes Fach eine eigene Funktion zu machen ist unnötig.

Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<div id="createButtons"></div>
<ul id="list"></ul>
<script type="text/javascript">
(function(){
	var all = ["Mathe", "Deutsch", "Englisch", "Sport"];
	var buttonContainer = document.getElementById("createButtons");
	all.forEach(function(item){
		var button = document.createElement("button");
		button.innerHTML = item;
		button.addEventListener("click", function(){
			addItem(item);
		}, false);
		buttonContainer.appendChild(button);
	});
	
	var list = document.getElementById("list");
	function addItem(item){
		var li = document.createElement("li");
		li.item = item;
		li.appendChild(document.createTextNode(item));
		var deleteButton = document.createElement("button");
		deleteButton.innerHTML = "X";
		deleteButton.addEventListener("click", function(){
			list.removeChild(li);
		}, false);
		li.appendChild(deleteButton);
		
		var beforeLi = null;
		for (var i = 0, l = list.childNodes.length; i < l; i += 1){
			if (list.childNodes[i].item > item){
				beforeLi = list.childNodes[i];
				break;
			}
		}
		list.insertBefore(li, beforeLi);
	}
}());
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben