Schriftzug in Button wechseln

[Tom Harrison]

Guten Abend an alle

Meine Stoppuhr nimmt immer mehr gestalt an.
Jetzt hätte ich aber eine ganz andere Frage.
Ist es möglich, den Schriftzug in einem Button zu änderen? So im Sinne von, wenn ich auf "Start" klicke, dass dann daraus ein "Stopp" Button wirt.

Wisst ihr was ich meine?

Danke einmalmehr.

Gruss
tom

[WauWau]

Hallo Tom,

Meine Stoppuhr nimmt immer mehr gestalt an.

ich habe leider keine ahnung, von welcher du sprichst :(

Ist es möglich, den Schriftzug in einem Button zu änderen? So im Sinne von, wenn ich auf "Start" klicke, dass dann daraus ein "Stopp" Button wirt.

Nun, wenn das dein button ist:

<input type="button" id="button" onClick="blabla();" value="Start" />

Dann brauchst du doch einfach nur

document.getElementById("button").value = "Stop";

zu schreiben, und fertig!?

und wenn du willst, dass irgendwas beendet anstatt gestartet wird, würde ich eben sowas machen:

var state = "off"; // off | on

function blabla()
{
   if(state == "off") {
      mache_an();
      state = "on";
   } else {
      mache_aus();
      state = "off"; }
}

WauWau

[Tom Harrison]

ich habe leider keine ahnung, von welcher du sprichst :(

weiter nicht schlimm, dass ist mein script an welchem ich arbeite und ständig komische sachen frage. ;-)

<input type="button" id="button" onClick="blabla();" value="Start" />

Dann brauchst du doch einfach nur

document.getElementById("button").value = "Stop";

sorry meine blöde frage, wo muss ich den das hineinschreiben?

gruss
tom

[Alexander]

document.getElementById("button").value = "Stop";
sorry meine blöde frage, wo muss ich den das hineinschreiben?

in die Funktion, die aufgerufenwird, wenn der User auf "Sart" klickt.

[Tom Harrison]

<input type="button" id="button" onClick="blabla();" value="Start" />

Dann brauchst du doch einfach nur

document.getElementById("button").value = "Stop";

Hat alles super geklappt. vielen dank und gute nacht.

gruss
tom

[Tom Harrison]

document.getElementById("button").value = "Stop";

hat einwandfrei geklappt, jetzt aber kann ich dem button keine feste grösse geben. mit style="width:150" passiert leider nichts. komisch, die hintergrundfrabe kann ich ändern. warum die grösse nicht?

gruss
tom

[Struppi]

document.getElementById("button").value = "Stop";

Was aber nicht nötig ist (das läuft nur auf DOM fähigen Browsern), da du Formular elemente auf über document.forms[x].elements[x] ansprechen kannst.

hat einwandfrei geklappt, jetzt aber kann ich dem button keine feste grösse geben. mit style="width:150" passiert leider nichts. komisch, die hintergrundfrabe kann ich ändern. warum die grösse nicht?

150 was?
du solltest imer mal wieder auch in selfhtml reinschauen (dafür ist es ja da) http://selfhtml.teamone.de/css/formate/wertzuweisung.htm

Struppi.

[Tom Harrison]

150 was?
du solltest imer mal wieder auch in selfhtml reinschauen (dafür ist es ja da) http://selfhtml.teamone.de/css/formate/wertzuweisung.htm

dankeschöne....hat natürlich geklappt. war eben der meinung, dass wenn ich nichts eingebe, es immer px nimmt.
dem war nicht so, man lern nie aus!

danke und gruss
tom

[WauWau]

Hallo Struppi,

document.getElementById("button").value = "Stop";

Was aber nicht nötig ist (das läuft nur auf DOM fähigen Browsern), da du Formular elemente auf über document.forms[x].elements[x] ansprechen kannst.

Genauso kannst du es über den Name, Tagname oder sonstwie ansprechen. Den Möglichkeiten sind keine Grenzen gesetzt, das weißt du genauso gut wie ich, deswegen ist diese Bemerkung auch... unnütz. (dieses posting hier vielleicht auch ;-)

WauWau

[Struppi]

Was aber nicht nötig ist (das läuft nur auf DOM fähigen Browsern), da du Formular elemente auf über document.forms[x].elements[x] ansprechen kannst.

Genauso kannst du es über den Name, Tagname oder sonstwie ansprechen. Den Möglichkeiten sind keine Grenzen gesetzt, das weißt du genauso gut wie ich,

Ich wollte hier nur darauf aufmerksam machen, das hier unnötigerweise eine Variante verwendet wird, die ältere Browserversionen ausperrt (u.a. den den ich gerade hier benutze IE 4).

Struppi.

[WauWau]

Hallo Struppi,

Was aber nicht nötig ist (das läuft nur auf DOM fähigen Browsern), da du Formular elemente auf über document.forms[x].elements[x] ansprechen kannst.

Genauso kannst du es über den Name, Tagname oder sonstwie ansprechen. Den Möglichkeiten sind keine Grenzen gesetzt, das weißt du genauso gut wie ich,

Ich wollte hier nur darauf aufmerksam machen, das hier unnötigerweise eine Variante verwendet wird, die ältere Browserversionen ausperrt (u.a. den den ich gerade hier benutze IE 4).

der IE4 ist afaik von 97 oder sowas.... und zudem ist er von MS. Ich finde schon, dass man bei DHTML doch auf getElementById() nicht verzichten sollte, wenn die Benutzung wirklich angebracht ist...

WauWau

[Struppi]

Ich wollte hier nur darauf aufmerksam machen, das hier unnötigerweise eine Variante verwendet wird, die ältere Browserversionen ausperrt (u.a. den den ich gerade hier benutze IE 4).

der IE4 ist afaik von 97 oder sowas.... und zudem ist er von MS. Ich finde schon, dass man bei DHTML doch auf getElementById() nicht verzichten sollte, wenn die Benutzung wirklich angebracht ist...

Ich glaub von 98 - aber mein Uni Rechner ist auch von 96 ;-)

Die Frage ist ob es um DHTML ging, eine einfache Stoppuhr mit Formularelementen sollte ab Netscape 2 oder IE 3 laufen.

Und ob man unbedingt Kanonen benutzen muss, wenn man Spatzen erschiessen möchte?

Struppi.

[WauWau]

Hallo Struppi,

Ich glaub von 98 - aber mein Uni Rechner ist auch von 96 ;-)

der IE4 wurde afaik mit Win98 dazugeliefert.

Die Frage ist ob es um DHTML ging, eine einfache Stoppuhr mit Formularelementen sollte ab Netscape 2 oder IE 3 laufen.

Es war wie bereits gesagt nur ein Beispiel, ich hätte auch gleich hinschreiben können:

daselement.value = "Stop";

und ihm gesagt "'daselement' ist dann dein element, z.b. document.forms[x].elements[x] oder document.getElementsByTagname(x)[x] oder sonstwas". Ist ja auch egal, wie er es aufruft.

Und ob man unbedingt Kanonen benutzen muss, wenn man Spatzen erschiessen möchte?

Ist dann die Sache, wie er es letztenendes aufruft. Und wenn ich _ein_ einzelnes, bestimmtes Element habe, was ich so erreiche möchte, gebe ich ihm idr. eine id, das ist bequem und einfach und alle Browser, mit denen momentan so gesurft wird, können das. NS afaik breits ab 4, aber jedenfalls ab v6, IE ab v5, Opera ab v5, Mozilla ab schon-ganz-früh, usw...

WauWau

[Struppi]

Und ob man unbedingt Kanonen benutzen muss, wenn man Spatzen erschiessen möchte?

Ist dann die Sache, wie er es letztenendes aufruft. Und wenn ich _ein_ einzelnes, bestimmtes Element habe, was ich so erreiche möchte, gebe ich ihm idr. eine id, das ist bequem und einfach und alle Browser, mit denen momentan so gesurft wird, können das. NS afaik breits ab 4, aber jedenfalls ab v6, IE ab v5, Opera ab v5, Mozilla ab schon-ganz-früh, usw...

Der Frager wollte ein Formularelement ändern.
Formularelemente manipulieren kann man mindestens seit Netscape 2 und IE 3. Ich verwende in der Regel this.form als Referenz. das läuft in allen Browsern die JS können. Also gibt es in diesem Falle keine Notwendigkeit DOM Funktionen zu zitieren. Zumal diese Art und weise sehr gut und ausführlich in selfhtml erklärt ist.

Anders sieht die Sache natürlich bei DHTML aus, aber selbst da muss man sich Fragen ob man noch document.layers oder document.all benutzen will.

Also für mich bleibt's dabei, um so einfache Sachen zu machen wie Formularfelder zu manipulieren (das ist es worum es hier geht), ist es sinnvoll und kompatibler es so zu machen wie es in selfhtml steht.

Bei DHTML kommt es auf den Umfang an. Auch darüber gibt es in selfhtml längere Abhandlungen.

Struppi.

[WauWau]

Hallo Struppi,

Also für mich bleibt's dabei, um so einfache Sachen zu machen wie Formularfelder zu manipulieren (das ist es worum es hier geht), ist es sinnvoll und kompatibler es so zu machen wie es in selfhtml steht.

Na gut, letztenendes kommt es natürlich auch drauf an, ob man weiß, das wie-vielte <form> das Formular jetzt ist, usw...

WauWau

[Struppi]

Na gut, letztenendes kommt es natürlich auch drauf an, ob man weiß, das wie-vielte <form> das Formular jetzt ist, usw...

Nein, das muss man nicht Wissen. Insofern ist die Zugriffsmöglichkeit über document.forms sogar flexibler.

Man kann auf eine Formular zugreifen:

1. über this.form eines Formularelenmentes oder this des onsubmit Handlers. Das Formular darf heißen wie es will.

2. über den Namen, dann ist es das gleiche wie mit einer ID, außer das es mehrere geben kann und man dann über eine Array refenrenzieren muss und das es nicht kompatibel zu alten Browsern ist und das es wesntlich langsamer ist.

3. Über den Index.

Um das nochmal zu verdeutlichen worüber wir reden:

<input type="button"
onClick="this.value = 'Start' == this.value ? 'Stop' : 'Start'"
value="Start">

Struppi.

[WauWau]

Hallo Struppi,

1. über this.form eines Formularelenmentes oder this des onsubmit Handlers. Das Formular darf heißen wie es will.

jo, ist soweit auch gar nicht schlecht.

2. über den Namen, dann ist es das gleiche wie mit einer ID, außer das es mehrere geben kann und man dann über eine Array refenrenzieren muss und das es nicht kompatibel zu alten Browsern ist und das es wesntlich langsamer ist.

wie? das ansprechen eines formulars <form name="Meinformular"> mittels document.Meinformular ist langsamer und unkompatibel zu alten browsern? .... echt?

Übrigens ist das Attrbut "name" laut W3C doch nicht mehr erwünscht und soll aus dem Standart enfallen, wenn es das nicht schon getan ist.

3. Über den Index.

Jo, das ist imho oftmals sehr ungünstig, wenn man nicht weißt, das wievielte <form> es ist.

<input type="button"
onClick="this.value = 'Start' == this.value ? 'Stop' : 'Start'"
value="Start">

Naja, hier greifst du nicht auf das Formular zu, sondern per this auf das Element an sich. Ist imho auch schön so. Ansonsten ist "die this-methode" [...] auch ganz schön und ich setze sie entsprechend gerne ein ;-)

WauWau

[Struppi]

und wenn du willst, dass irgendwas beendet anstatt gestartet wird, würde ich eben sowas machen:

var state = "off"; // off | on

function blabla()
{
   if(state == "off") {
      mache_an();
      state = "on";
   } else {
      mache_aus();
      state = "off"; }
}

Eigentlich dachte ich du kannst programmieren, du hast ja schon einiges an code geboten. Aber du scheinst nicht mal bool'sche Variabeln zu kennen.

var state = false; // false | true

function blabla()
{
if(state) mache_an(); else mache:_aus();
state = !state;
}

Struppi.

[WauWau]

Hallo Struppi,

Eigentlich dachte ich du kannst programmieren, du hast ja schon einiges an code geboten. Aber du scheinst nicht mal bool'sche Variabeln zu kennen.

var state = false; // false | true

function blabla()
{
if(state) mache_an(); else mache:_aus();
state = !state;
}

Natürlich kenn ich eine boolsche Variable. Aber ich hielt es hier für sinnvoller, einen "dummen" string zu benutzen, da es so scheint, dass Tom Harrison sich in JavaScript noch nicht "soo" gut auskennt und ... ich ihn nicht verwirren wollte.

WauWau

[n i c o]

Hallo!

Meine Stoppuhr nimmt immer mehr gestalt an.
Jetzt hätte ich aber eine ganz andere Frage.
Ist es möglich, den Schriftzug in einem Button zu änderen? So im Sinne von, wenn ich auf "Start" klicke, dass dann daraus ein "Stopp" Button wirt.

Klar!

Wisst ihr was ich meine?

Glaube schon:
<input type="button" value="Start" onClick="this.value='Stopp';">

Gruss
tom

Grüße

n i c o