Ergebnis 1 bis 3 von 3
  1. 12-11-2015, 20:50 #1
    MatzeAusNRW
    MatzeAusNRW ist offline Grünschnabel
    registriert
    12-11-2015
    Beiträge
    3

    Elemente aus einer Liste löschen & Liste sortieren

    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-Code:
    <!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
    Geändert von MatzeAusNRW (13-11-2015 um 06:21 Uhr)
    Zitieren Zitieren
  2. 14-11-2015, 22:59 #2
    Avatar von kkapsner
    kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Elemente aus einer Liste löschen & Liste sortieren

    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>
    kkapsner.de
    Zitieren Zitieren
  3. 16-11-2015, 07:38 #3
    MatzeAusNRW
    MatzeAusNRW ist offline Grünschnabel
    registriert
    12-11-2015
    Beiträge
    3

    AW: Elemente aus einer Liste löschen & Liste sortieren

    Hallo kkapsner,

    ich danke Dir!
    Zitieren Zitieren
« Vorheriges Thema | Nächstes Thema »

Ähnliche Themen

  1. Java Script /jQuery / Suchen in einer Liste
    Von Ruby50 im Forum JavaScript
    Antworten: 16
    Letzter Beitrag: 18-02-2014, 21:35
  2. Liste sortieren - aber wie??
    Von nordie92 im Forum Serverseitige Programmierung
    Antworten: 2
    Letzter Beitrag: 01-03-2010, 23:25
  3. Liste mit Unterlisten in einer Zeile
    Von Scoobay im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 02-01-2009, 16:50
  4. Liste sortieren - aber wie??
    Von Ron Wood im Forum Serverseitige Programmierung
    Antworten: 12
    Letzter Beitrag: 16-12-2007, 15:35
  5. dynamische erstellung einer Liste
    Von Tolwin im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 14-10-2004, 17:28

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

Foren-Regeln