nicht angemeldet
dynamisch links erstellen MIT onClick-Funktionalität
0 
Struppi
dynamisch links erstellen MIT onClick-Funktionalität
Hallo zusammen!
Ich hab ein Problem: ich will dynamisch Einträge in eine Liste machen (geht auch prima) und einen remove-Link dazu. Der soll per onClick die Einträge wieder entfernen. Nun weiß ich nicht, wie die Syntax lauten muss, da das onClick bereits bei Erzeugung des Links aufgerufen wird. Dafür passiert nichts mehr, wenn man den Link anklickt :-( Die komplette Testseite steht da unten... Hoffe, jmd kann mir helfen.
Gruß, KitCat
<html><head><title>Test</title></head>
<body>
<ol id="Liste">
</ol>
<script type="text/javascript">
var liNummer = 0;
function insert(){
liNummer++;
var newLI = document.createElement("li");
var identifier = document.createAttribute("id");
identifier.nodeValue = "li"+liNummer;
newLI.setAttributeNode(identifier);
document.getElementById("Liste").appendChild(newLI);
var newLIText = document.createTextNode('Das ist Listeneintrag Nummer ' + liNummer);
document.getElementById("li"+liNummer).appendChild(newLIText);
var newLILink = document.createElement("a");
var linkId = document.createAttribute("id");
linkId.nodeValue="link"+liNummer;
newLILink.setAttributeNode(linkId);
var linkHref = document.createAttribute("href");
linkHref.nodeValue="#";
newLILink.setAttributeNode(linkHref);
document.getElementById("li"+liNummer).appendChild(newLILink);
var newLinkText = document.createTextNode(' rem');
document.getElementById("link"+liNummer).appendChild(newLinkText);
document.getElementById("link"+liNummer).onClick=remove(liNummer);
}
function remove(nr){
alert("nummer: "+nr);
//document.getElementById("Liste").removeChild(document.getElementsByTagName("li")[liNummer]);
}
</script>
<a href="#" onClick="insert()">click</a>
</body></html>
-
<html><head><title>Test</title></head>
<body>
<ol id="Liste">
</ol>
<script type="text/javascript">
var liNummer = 0;function insert(){
liNummer++;
var newLI = document.createElement("li");
var identifier = document.createAttribute("id");
identifier.nodeValue = "li"+liNummer;
newLI.setAttributeNode(identifier);Du brauchst das Attribute nicht zu erzeugen, es existiert bereits.
D.h. es reicht:
newLI.id = "li"+liNummervar newLILink = document.createElement("a");
var linkId = document.createAttribute("id");
linkId.nodeValue="link"+liNummer;
newLILink.setAttributeNode(linkId);
var linkHref = document.createAttribute("href");
linkHref.nodeValue="#";
newLILink.setAttributeNode(linkHref);Hier das gleiche. Das href Attribut ist per Default bei einem A Element schon vorhanden
document.getElementById("li"+liNummer).appendChild(newLILink);
var newLinkText = document.createTextNode(' rem');
document.getElementById("link"+liNummer).appendChild(newLinkText);
document.getElementById("link"+liNummer).onClick=remove(liNummer);Hier ist getelementById überflüssig, da du weiter oben ja schon das Element hast.
newLI.appenChild(....)
Dein Problem ist der onclick Event. Einmal heißt er "onclick" (Case sensitiv) und dann musst du diesem Handler eine Funktionsreferenz zuweisen und nciht den Rückgabewert einer Funktion.
In deinem Fall müßte es so gehen:
newLI.onclick = remove;und die Funktion entpsrechend anpassen:
function remove()
{
document.getElementById("Liste").removeChild(this);
}</script>
<a href="#" onClick="insert()">click</a>
</body></html>Hier solltest du noch ein return false einfügen, da ansonsten zum Anker '#' gesprungen wird.
Struppi.
-
Jau, besten Dank für die Infos und die hilfreichen Belehrungen! Wusste ich bis dato nicht, da ich nicht so viel JS programmiere. Mit dem remove geht das zwar noch nicht so, wie ich´s gern hätte (nun ist der ganze Listeneintrag anklickbar), aber das krieg ich noch hin. Zur Not bau ich das Script so um, dass ich das remove-Script durch das href="javascript:..." des rem-Links aufrufe, da ich da eh kein Sprungziel benötige.
-
Ach, ich Depp :-) Ist ja ganz einfach... Ich setzt das onclick einfach auf den Link und nutze in dem Remove-Script dann removeChild(this.parentNode)...
-
-