JavaScript Link ändern

Nico1994

Ich bastel mir gerade ein Klapp ein und aus Gästebuchformular.

Es funktioniert soweit alles. Derzeit habe ich 2 Funktionen. Die erste Funktion ("aufklappen();") stellt das display des forms element auf block. Die zweite Funktion ("zuklappen();") stellt das display des forms element wieder auf hidden.

Bisher hab ich dafür 2 Links verwenden, der eine zum auf-, und der andre zum zuklappen.

Ich hätte jetzt aber gerne, dass sich der Link aufklappen beim anklicken in den Link zuklappen ändert.

Hab schon paar Dinge versucht, hat aber nichts geklappt!

Hier der Quelltext:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aufklappen/Zuklappen</title>
 
<script type="text/javascript" language="javascript">
function aufklappen () {
      document.all.formular.style.display = "block";   
 
}
function zuklappen () {
      document.all.formular.style.display = "none";
 
}
</script>
 
</head>
<body>
<a href="javascript:aufklappen();">Aufklappen</a>
<form style="display:none" id="formular" method="post" action="">
<label>Name:</label><input name="Text1" type="text" />
<label>Inhalt:</label><textarea name="TextArea1" cols="20" rows="2"></textarea>
</form>
</body>
</html>

Alles anzeigen

Habs mit document.getElementbyID("....").href versucht. Das Funktioniert schonmal nicht. Mit onclick = this.innterHTML = 'newlink' ändert sich nur der Linktext. Es soll sich beides ändern. Zum einen der Linktext (in "Zuklappen") und href soll sich in javascript:zuklappen(); ändern, damit ich die funktion zuklappen eben aufrufen kann.

Wie kann man das bewerkstelligen?

Grüße,
Nico

Pion

1000 Wege führen nach Rom,...
Wenn du auf die Funktionen nicht kommst kannst doch sowas machen:

Code

[COLOR=#008000]<div id="muh"><a href=[COLOR=#0000ff]"javascript:aufklappen();"[/COLOR]>[/COLOR]Aufklappen[COLOR=#008000]</a></div>


[/COLOR]

Dann mit getelementbyid(muh).innerhtml = '<a href xy';

mfg

threadi

Oder Du prüfst in einer einzigen Funktion klappen(), welchen Wert document.all.formular.style.display hat und setzt entsprechend den neuen Wert ein.

Pion

Oder
CODE]
document.getElementById("text_link").href =
document.getElementById("text_link").innerHTML =
[/CODE]

Nico1994

@Pion: hab ich versucht, aber wahrscheinlich nicht richtig, da es nicht funktioniert.

Ich hab die Funktion erstellt:

function linkWechsel () {
getElementbyID(klappen)innerHTML = '<a href="javascript:zuklappen();">Zuklappen</a>
}

Und mein Link sieht so aus:

<div id="klappen"><a href="javascript:aufklappen();" onclick="linkWechsel();">Aufklappen</a></div>

Durch onclick müsste ja die funktion link wechsel aufgerufe werden!? Tja, vielleicht wird sie das, kann ich net sagen. Wenn ich auf Aufklappen drück, tut sich gar nichts mehr. Scheinbar folgt der Linkwechsel zu schnell, so das das display auf none bleibt!? Oder muss ich die von dir angeführte Methode anders einsetzen?

//EDIT:

Ok, hatte ein paar Fehler drin, wie ich grade gesehen habe.

PHP

function linkWechsel () {
      document.getElementbyID(klappen).innerHTML = '<a href="javascript:zuklappen();">Zuklappen</a>';
}

Das funktionier aber leider noch nicht. Er öffnet mir nun zwar wieder das Formular, aber der Link ändert sich nicht.

Dodo

Zitat von Pion

document.getElementById("text_link").innerHTML =

Enmerkung:
.innerHTML ist böse! JavaScript ist eine DOM-Technologie und sollte auch über das Document Object Model auf Elemente zugreifen.
Wenn .innerHTML vermieden wird, beugt das vielen Fehler vor, die entstehen, wenn invaliden HTML eingeschleust wird.

Nico1994

Zitat von Dodo

Enmerkung:
.innerHTML ist böse! JavaScript ist eine DOM-Technologie und sollte auch über das Document Object Model auf Elemente zugreifen.
Wenn .innerHTML vermieden wird, beugt das vielen Fehler vor, die entstehen, wenn invaliden HTML eingeschleust wird.

Sollte ich statt dessen lieber appendChild verwenden?

Dodo

Hier ein Beispiel:

HTML

<a href="JavaScript:klappen();" id="klapplink">Aufklappen</a>

Code

function klappen()
{
        if(document.getElementById("klapplink"))
        {
                if(document.getElementById("klapplink").firstChild.nodeValue == 'Zuklappen')
                {
                        document.getElementById("klapplink").firstChild.nodeValue = 'Aufklappen';
                        // Sonstiger code
                }else
                {
                        document.getElementById("klapplink").firstChild.nodeValue = 'Zuklappen';
                        // Sonstiger code
                }
        }
}

Alles anzeigen

Mit diesem Code musst du nicht einmal mehr das href-Attribut verändern.

Nico1994

Vielen Dank. Funktioniert einwandfrei!

Tags