Buttonbeschriftung bei Klick ändern

[Lars]

Hi,
ich habe da gerade noch eine Frage:
Über einen Button soll ein Formular ein- bzw. ausgeblendet sein.
Dabei soll sich die Beschriftung des Buttons jeweils mitändern.

Hier mein Button:
(wegen Barrierefreiheit wird das Formular immer anfangs eingeblendet)

<input type="button" name="formularX_aus_einblenden" onclick="show_hide_formular('formularX','formularX_aus_einblenden')" value="Verbergen" />
und das Script mit der Funktion show_hide_formular:

function show_hide_formular(forumlarname, buttonname)  
{  
	if (document.getElementById(forumlarname).style.display==''){  
		document.getElementById(forumlarname).style.display='none';  
		document.buttonname.value='Anzeigen';}  
	else{  
		document.getElementById(forumlarname).style.display='';  
		document.buttonname.value='Verbergen';}  
}  

Klappt leider nicht so wie angedacht. Das Formular kann ich wunderbar ein und ausblenden, aber die Beschriftung steht immer auf "Verbergen".

Viele Grüße
Lars

[Felix Riesterer]

Lieber Lars,

document.buttonname

Dein Code setzt voraus, dass das "document"-Objekt eine Eigenschaft "buttonname" hat. Die hat es aber nicht. Du suchst stattdessen eine Möglichkeit, über die in der Variable "buttonname" mitgelieferte Information (den Inhalt des "name"-Attributes Deines <input>-Elements, also Deines Buttons) Deinen Button zu erreichen.

Klappt leider nicht so wie angedacht.

Du hast leider keine Fehlermeldung Deines Browsers gepostet. Das hätte Dir bei der Fehlersuche bereits wertvolle Hinweise liefern können!

Das Formular kann ich wunderbar ein und ausblenden,

Also gelingt es Dir, das Formular-Element (<form>) mittels der im Funktionsaufruf übertragenen Parameter (Variable "formularname") zu erreichen. Warum verwendest Du nicht dieselbe Herangehensweise auch bei Deinem Button?

Vergleiche:

document.getElementById(forumlarname).style.display='none';

document.buttonname.value='Anzeigen';}

  
Fällt Dir etwas auf?  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)

[Lars]

document.getElementById(forumlarname).style.display='none';

document.buttonname.value='Anzeigen';}

>   
> Fällt Dir etwas auf?  
>   

Habe bei meinem Button einfach den namen als ID gesetzt. Jetzt klappt's super!  
  
Tausend Dank!

[niklaskamenisch]

auch wenn es schon beantwortet ist:

setz beim funktionsaufruf als 2. lieber "this"
dann kannst du in der funktion das machen "this.value = 'Anzeigen';"
und dir das id="formularX_aus_einblenden" sparen.

[Lars]

setz beim funktionsaufruf als 2. lieber "this"
dann kannst du in der funktion das machen "this.value = 'Anzeigen';"
und dir das id="formularX_aus_einblenden" sparen.

Super, danke für den Tipp - damit wird es noch schlanker.
Nur funktioniert es gerade noch nicht.
Habe als Button:
<input type="button" onclick="show_hide_formular('formularX', this)" value="Verbergen" />

und als Funktion:

  
function show_hide_formular(formularname)  
{  
	if (document.getElementById(formularname).style.display==''){  
		document.getElementById(formularname).style.display='none';  
		this.value='Anzeigen';}  
	else{  
		document.getElementById(formularname).style.display='';  
		this.value='Verbergen';}  
}  

Es gibt keine Fehlermeldung, aber die Buttonbeschriftung ändert sich nicht.
Das Formular wird nach wie vor ein und ausgeblendet.

Viele Grüße
Lars

[Encoder]

setz beim funktionsaufruf als 2. lieber "this"

Du solltest this als Parameter übergeben (das tust du ja auch) und den natürlich auch auswerten (das tust du nicht).
Also show_hide(formularname, button)
und dann
button.value = ...

display auf '' setzen ist übrigens keine gute Idee. Nimm dafür doch was sinnvolles.

[Der Martin]

Hallo,

display auf '' setzen ist übrigens keine gute Idee.

doch, dann gilt nämlich wieder der ursprüngliche Wert aus dem Browser- oder Dokumentstylesheet.

Nimm dafür doch was sinnvolles.

Ein Leerstring *ist* was Sinnvolles, wenn man nur die mit Javascript gesetzten Eigenschaften wieder unwirksam machen will.

Ciao,
 Martin

[Encoder]

display auf '' setzen ist übrigens keine gute Idee.

doch, dann gilt nämlich wieder der ursprüngliche Wert aus dem Browser- oder Dokumentstylesheet.

ahso? Gilt das für alle Eigenschaften?
Wusste ich nicht.

[Der Martin]

Hallo,

display auf '' setzen ist übrigens keine gute Idee.
doch, dann gilt nämlich wieder der ursprüngliche Wert aus dem Browser- oder Dokumentstylesheet.
ahso? Gilt das für alle Eigenschaften?

ja, aber frag mich jetzt bitte nicht, wo das steht. Dafür ist Gunnar zuständig. ;-)

Wusste ich nicht.

Und so lernen wir alle täglich dazu.

So long,
 Martin

[Felix Riesterer]

Lieber Lars,

onclick="show_hide_formular('formularX', this)"

das geht noch konsequenter!

Formularelemente enthalten eine Referenz auf das Formular, in dem sie vorkommen. Dein Aufruf könnte also show_hide_formular(this.form, this) lauten.

In der Funktion kannst Du dann die Variablen so umbenennen:

function show_hide_formular (f, b) {  
    // "f" enthält eine Referenz auf ein <form>-Element  
    // "b" enthält eine Referenz auf ein <input type="button">-Element  
  
    if (f && b) {  
        if (f.style.display == "") {  
            f.style.display = "none";  
            b.value = "Anzeigen";  
        } else {  
            f.style.display = "";  
            b.value='Verbergen';  
        }  
    }  
}

Wer es noch kürzer will, der übergibt tatsächlich nur noch "this": ~~~javascript show_hide_formular(this)

function show_hide_formular (b) {
    // "b" enthält eine Referenz auf ein <input type="button">-Element

if (b && b.form) {
        if (b.form.style.display == "") {
            b.form.style.display = "none";
            b.value = "Anzeigen";
        } else {
            b.form.style.display = "";
            b.value='Verbergen';
        }
    }
}

  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)

[niklaskamenisch]

ich kann mich irren, aber blendet er damit nicht auch den button aus, wenn der innerhalb des forms ist? sollte wohl nicht der sinn sein oder?

kann aber das form auch falsch verstanden haben.