inspiron: Mit Button Text und Color ändern

SELF-Forum

Mit Button Text und Color ändern

inspiron
– Informationen zu den Bewertungsregeln

Hallo,
ich möchte eine Schichtplanung erstellen die für die Eingabe folgendermaßen funktionieren soll.
Es sind ca 465 input Textfelder vorhanden (für je Mitarbeiter 31Tage).

Nun möchte ich mit der Maus in ein Textfeld klicken und dann mit einem Button diese mit Text und Farbe füllen.

Bisher gehts nur in einer Box mit Text und in einer anderen mit Farbe.

-Wie bekomme ich es hin, daß Farbe und Text in einer eingetragen werden?
-Wie würde es funktionieren, das der Eintrag in der "angeklickten" Box erfolgt?

Gruß

  
<html>  
<head>  
<script language="JavaScript">  
<!--  
function chC(id,cL)  
		{  
	  
		//wenn Style noch nicht gesetzt  
		if(document.getElementById(id).name != '1')  
			{  
			  
			document.getElementById(id).style.backgroundColor = cL;  
			document.getElementById(id).name = '1';  
			}  
			else if(document.getElementById(id).name = '1'){  
			  
			document.getElementById(id).style.backgroundColor = '';  
			document.getElementById(id).name = '0';  
			}  
		}  
function textWechsel(neuerText)  
    {  
   document.getElementById("textfeld").value = neuerText;  
    }  
//-->  
</script>  
<input type="text" name="textfeld" id="textfeld">  
  
<input type="text" value="<?$text?>" id="neu">  
<input type="text" value="<?$text?>" id="neu">  
<input type="text" value="<?$text?>" id="neu">  
<input type="text" value="<?$text?>" id="neu">  
<br><br>  
  
<input type="button" name="text" value="U" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Frei" onClick="textWechsel(this.value)"><br>  
<input type="button" name="text" value="Dienst1" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst2" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst3" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst4" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst5" onClick="textWechsel(this.value)"><br>  
<input type="button" name="text" value="Dienst6" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst7" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst8" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst9" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst10" onClick="textWechsel(this.value)"><br><br>  
  
<input type="button" onclick="document.getElementById('neu').style.backgroundColor = 'yellow';" value="Gelb">  
<input type="button" onclick="document.getElementById('neu').style.backgroundColor = 'red';" value="Rot">  
<input type="button" onclick="document.getElementById('neu').style.backgroundColor = 'green';" value="Grün">  
<input type="button" onclick="document.getElementById('neu').style.backgroundColor = 'blue';" value="Blau">  
<input type="button" onclick="document.getElementById('neu').style.backgroundColor = '';" value="Reset">  
<br><br>  
  
</body>  
</html>  
------------------------------------  
<html>  
<head>  
<title>Test</title>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Mit Button Text und Color ändern

    gast42
    – Informationen zu den Bewertungsregeln

    Nun möchte ich mit der Maus in ein Textfeld klicken und dann mit einem Button diese mit Text und Farbe füllen.

    also gibt es Text nur aus einer begrenzten Auswahl? Warum dann nicht eine http://de.selfhtml.org/html/formulare/auswahl.htm@title=Auswahlliste?

    <html>
    <head>
    <script language="JavaScript">

    hier fehlt das type-Attribut, language ist dagegen überflüssig

    function chC(id,cL)

    wird die Funktion je aufgerufen?

      if(document.getElementById(id).name != '1')

    wieso missbrauchst du hier das name-Attribut?

    <input type="text" value="<?$text?>" id="neu">
    <input type="text" value="<?$text?>" id="neu">
    <input type="text" value="<?$text?>" id="neu">
    <input type="text" value="<?$text?>" id="neu">

    Eine id ist einmalig! Sie darf also nicht vier mal vorkommen.

    <input type="button" onclick="document.getElementById('neu').style.backgroundColor = 'yellow';" value="Gelb">

    entsprechend mus sich der Browser hier für eins der vier Elemente mit gleicher Id entscheiden.

    </body>
    </html>

    <html>
    <head>
    <title>Test</title>

    nochmals html, head, title?

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Mit Button Text und Color ändern

      inspiron
      – Informationen zu den Bewertungsregeln

      Nun möchte ich mit der Maus in ein Textfeld klicken und dann mit einem Button diese mit Text und Farbe füllen.

      also gibt es Text nur aus einer begrenzten Auswahl? Warum dann nicht eine http://de.selfhtml.org/html/formulare/auswahl.htm@title=Auswahlliste?

      Es müssen unbedingt Button sein!

      <html>
      <head>
      <script language="JavaScript">

      hier fehlt das type-Attribut, language ist dagegen überflüssig

      function chC(id,cL)

      wird die Funktion je aufgerufen?

        if(document.getElementById(id).name != '1')

      wieso missbrauchst du hier das name-Attribut?

      <input type="text" value="<?$text1?>" id="neu1">
      <input type="text" value="<?$text2?>" id="neu2">
      <input type="text" value="<?$text3?>" id="neu3">
       .
       .
       .
      <input type="text" value="<?$text450?>" id="neu450">

      Eine id ist einmalig! Sie darf also nicht vier mal vorkommen.

      <input type="button" onclick="document.getElementById('neu').style.backgroundColor = 'yellow';" value="Gelb">

      entsprechend mus sich der Browser hier für eins der vier Elemente mit gleicher Id entscheiden.

      </body>
      </html>

      nochmals html, head, title?

      kopierfehler, ist es mal nur mein Testbeispiel

        
Ich möchte irgendein Textfeld "mit der Maus anklicken" danach ein Button "Dienst1" oder...., es soll dann der Text un eine vorgegebene Hintergrundfarbe eingetragen werden. Ich weiß nich wie ich das zusammen hinbekommen soll!  
  
  
~~~html
  
<script language="JavaScript">  
<!--  
function chC(id,cL)  
		{  
	  
		//wenn Style noch nicht gesetzt  
		if(document.getElementById(id).name != '1')  
			{  
			  
			document.getElementById(id).style.backgroundColor = cL;  
			document.getElementById(id).name = '1';  
			}  
			else if(document.getElementById(id).name = '1'){  
			  
			document.getElementById(id).style.backgroundColor = '';  
			document.getElementById(id).name = '0';  
			}  
		}  
function textWechsel(neuerText)  
    {  
   document.getElementById("textfeld").value = neuerText;  
    }  
//-->  
</script>  
<input type="button" name="text" value="U" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Frei" onClick="textWechsel(this.value)"><br><br>  
<input type="button" name="text" value="Dienst1" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst2" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst3" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst4" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst5" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst6" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst7" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst8" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst9" onClick="textWechsel(this.value)">  
<input type="button" name="text" value="Dienst10" onClick="textWechsel(this.value)"><br><br>  
  
<input type="button" onclick="document.getElementById('neu1').style.backgroundColor = 'yellow';" value="Gelb">  
<input type="button" onclick="document.getElementById('neu2').style.backgroundColor = 'red';" value="Rot">  
<input type="button" onclick="document.getElementById('neu3').style.backgroundColor = 'green';" value="Grün">  
<input type="button" onclick="document.getElementById('neu4').style.backgroundColor = 'blue';" value="Blau">  
<input type="button" onclick="document.getElementById('neu5').style.backgroundColor = '';" value="Reset">
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Mit Button Text und Color ändern

        Don P
        – Informationen zu den Bewertungsregeln

        Hallo,

        Auch das name-Attribut muss meines Wissens einmalig sein und darf außerdem nicht das gleiche sein wie eine ID, nicht mal name="name1" und irgendwo eine id="Name1" ist drin.

        Ich möchte irgendein Textfeld "mit der Maus anklicken" danach ein Button "Dienst1" oder...., es soll dann der Text un eine vorgegebene Hintergrundfarbe eingetragen werden. Ich weiß nich wie ich das zusammen hinbekommen soll!

        Wenn du ein Textfeld anklickst und danach einen Button, dann "weiß" niemand mehr (auch dein Rechner nicht), was vorher angelickt war (das Textfeld nämlich).

        Woher soll dein Programm also erfahren, welches Textfeld du einfärben willst? Das geht nur, wenn jeder Klick in ein Textfeld irgendwo gespeichert wird, so dass der click-Handler des Buttons darauf zurückgreifen kann.

        Du brauchst also einen click-Handler für die Textfelder, der den Klick in eine Variable schreibt. Der Handler des Buttons muss dann diese Variable lesen und das passende Textfeld einfärben - voilà!

        Viel Spaß, Don P

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Mit Button Text und Color ändern

          inspiron
          – Informationen zu den Bewertungsregeln

          Hallo,

          Auch das name-Attribut muss meines Wissens einmalig sein und darf außerdem nicht das gleiche sein wie eine ID, nicht mal name="name1" und irgendwo eine id="Name1" ist drin.

          Ich möchte irgendein Textfeld "mit der Maus anklicken" danach ein Button "Dienst1" oder...., es soll dann der Text un eine vorgegebene Hintergrundfarbe eingetragen werden. Ich weiß nich wie ich das zusammen hinbekommen soll!

          Wenn du ein Textfeld anklickst und danach einen Button, dann "weiß" niemand mehr (auch dein Rechner nicht), was vorher angelickt war (das Textfeld nämlich).

          o.k. logisch das habe ich verstanden!
          Nun würde ich aber trotzdem das erste Problem gelöst haben.
          Wie kann ich die beiden Funktionen so zusammenfügen das Text & Hintergrundfarbe zur gleichen Zeit (mit einem Button) eingefügt werden?

          Woher soll dein Programm also erfahren, welches Textfeld du einfärben willst? Das geht nur, wenn jeder Klick in ein Textfeld irgendwo gespeichert wird, so dass der click-Handler des Buttons darauf zurückgreifen kann.

          Du brauchst also einen click-Handler für die Textfelder, der den Klick in eine Variable schreibt. Der Handler des Buttons muss dann diese Variable lesen und das passende Textfeld einfärben - voilà!

          Viel Spaß, Don P

          Danke für den Denkanstoß, ist damit ein "Eventhandler" gemeint? Ist das auch in Java machbar?

          Gruß

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Mit Button Text und Color ändern

            EKKi
            – Informationen zu den Bewertungsregeln

            Mahlzeit inspiron,

            Danke für den Denkanstoß, ist damit ein "Eventhandler" gemeint? Ist das auch in Java machbar?

            Nein, aber in Javascript.

            MfG,
            EKKi

            --
            sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Mit Button Text und Color ändern

              inspiron
              – Informationen zu den Bewertungsregeln

              Danke für den Denkanstoß, ist damit ein "Eventhandler" gemeint? Ist das auch in Java machbar?

              Nein, aber in Javascript.

              ...sorry, daß meinte ich ja.

              Wie kann ich die beiden Funktionen so zusammenfügen das Text & Hintergrundfarbe zur gleichen Zeit (mit einem Button) eingefügt werden?

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Mit Button Text und Color ändern

                gast42
                – Informationen zu den Bewertungsregeln

                zB. so:

                du könntest deine zu ändernden Inputs um ein onclick erweitern

                <input onclick="globale_variable=this">

                die speichert sich einfach das letzte input-Element, in das jemand geklickt hat

                deine Funktionen zusammengefasst sähe so aus

                function aendere_beides (text, farbe) {  
 var element=globale_variable;  
 if (element) {  
  element.style.backgroundColor = farbe;  
  element.value = text;  
 }  
}

                Aufruf: onclick="aendere_beides('blabla','yellow')"

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Mit Button Text und Color ändern

                  inspiron
                  – Informationen zu den Bewertungsregeln

                  Guten Morgen!
                  Dankeschön:-)

                  <input onclick="globale_variable=this">

                  die speichert sich einfach das letzte input-Element, in das jemand geklickt hat

                  Was wird denn beim onclick gespeichert? Der id=name vom input-Element oder die Curserposition beim Klick?

                  Gruß

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Mit Button Text und Color ändern

                    gast42
                    – Informationen zu den Bewertungsregeln

                    Was wird denn beim onclick gespeichert? Der id=name vom input-Element oder die Curserposition beim Klick?

                    weder noch, this beinhaltet eine Referenz auf das Element selbst

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

        2. Mit Button Text und Color ändern

          EKKi
          – Informationen zu den Bewertungsregeln

          Mahlzeit Don P,

          Auch das name-Attribut muss meines Wissens einmalig sein

          Nein. Es durchaus möglich - und im Fall von z.B. einer Gruppe von Radiobuttons auch absolut sinnvoll - dass mehrere Elemente den gleichen Namen haben.

          MfG,
          EKKi

          --
          sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Mit Button Text und Color ändern

            Don P
            – Informationen zu den Bewertungsregeln

            Hallo EKKI,

            Auch das name-Attribut muss meines Wissens einmalig sein

            Nein. Es durchaus möglich - und im Fall von z.B. einer Gruppe von Radiobuttons auch absolut sinnvoll - dass mehrere Elemente den gleichen Namen haben.

            Ausgerechnet bei Radiobuttons ist das sinnvoll?
            Dann kann man sie ja nicht unterscheiden.

            Gerade habe ich so einen Fall, wo ich gerne name-Attribute verwenden würde, und zwar geht es um Fieldsets mit jeweils den gleichen Feldern:

            – input type="button" name="open"
            – input type="text" name="input"

            • select name="select"
              – input type="button" name="close"
              – input type="button" name="clear"

            Wenn ich nun mehrere solche Fieldsets habe, wäre es bequem, die name-Attribute immer beizubehalten, so dass die Steuerung des Verhaltens der Felder (ihre gegenseitige Beeinflussung) bequem über das name-Attribut erfolgen kann.

            Dazu müsste man aber eine Methode fieldsetNode.getElementsByName haben, um die einzelnen Felder in einem bestimmten Fieldset ermitteln zu können. Leider gibt es (laut SELFHTML) aber keine Methode getElementsByName eines beliebigen Node-Objekts, sondern nur des document-Objekts :-(.

            Gruß, Don P

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Mit Button Text und Color ändern

              Kai345 Homepage des Autors
              – Informationen zu den Bewertungsregeln

              [latex]Mae  govannen![/latex]

              Nein. Es durchaus möglich - und im Fall von z.B. einer Gruppe von Radiobuttons auch absolut sinnvoll - dass mehrere Elemente den gleichen Namen haben.

              Ausgerechnet bei Radiobuttons ist das sinnvoll?

              _Genau da_ ist es sinnvoll, da nur so ein XOR der Auswahl möglich ist.

              Dann kann man sie ja nicht unterscheiden.

              Es gibt noch andere Attribute, das Gesuchte fängt in diesem Fall mit „v“ an und hört mit „alue“ auf

              Gerade habe ich so einen Fall, wo ich gerne name-Attribute verwenden würde, und zwar geht es um Fieldsets mit jeweils den gleichen Feldern:

              – input type="button" name="open"
              – input type="text" name="input"

              • select name="select"
                – input type="button" name="close"
                – input type="button" name="clear"

              Mehrere gleiche Namen? Dann wird es sich wohl eher nicht um ein Formular handeln, da sich sonst die Werte der Gruppen wahrscheinlich gegenseitig überschreiben.
              Mit JS wäre es kein Problem, einfach dem fieldset eine id geben und diese für das jeweilige Element auslesen (über parentNode und Test auf nodeName bis zu einem fieldset zurückgehen und dann die id lesen, bzw. die Eventverarbeitung direkt ans Fieldset anhängen, soweit möglich. Aber ich weiß ja nicht, was genau du vorhast, daher ist es Raten.

              Cü,

              Kai

              --
              A workaround for an avoidable problem often adds clutter and overhead to the program which
              could have been avoided by not creating the problem in the first place.(Garrett Smith/clj)
              Foren-Stylesheet Site Selfzeug JS-Lookup
              SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Mit Button Text und Color ändern

                Don P
                – Informationen zu den Bewertungsregeln

                Hallo,

                Ausgerechnet bei Radiobuttons ist das sinnvoll?

                _Genau da_ ist es sinnvoll, da nur so ein XOR der Auswahl möglich ist.

                Meinetwegen...

                Mehrere gleiche Namen? Dann wird es sich wohl eher nicht um ein Formular handeln, da sich sonst die Werte der Gruppen wahrscheinlich gegenseitig überschreiben.

                Es handelt sich nicht um ein Formular, das ist richtig.

                Mit JS wäre es kein Problem, einfach dem fieldset eine id geben und diese für das jeweilige Element auslesen (über parentNode und Test auf nodeName bis zu einem fieldset zurückgehen und dann die id lesen, bzw. die Eventverarbeitung direkt ans Fieldset anhängen, soweit möglich.

                Ja, so habe ich mir das auch gedacht. Aber bequemer wäre hat ein node.getElementsByName

                Aber ich weiß ja nicht, was genau du vorhast, daher ist es Raten.

                Es ist so ein Pattern, das ich mir ausgedacht habe:

                • Ins TextFeld kann etwas eingegeben werden.
                • Solange das Selectfeld leer ist, sind die alle Buttons deaktiviert.
                • Sobald etwas im Textfeld steht (onkeyup) wird der Openbutton (name="open") klickbar, der die Eingabe als Option ins SelectFeld (name="select") schreibt.
                • Sobald eine Option im Selectfeld vorhanden ist, wird auch der Closebutton (name= "close") klickbar, der den Eintrag wieder entfernt.
                • Sobald mehr als eine Option im Selectfeld steht, wird auch der Clearbutton (name="clear") klickbar, der alle Einträge wieder entfernt.

                Die Felder müssen sich also gegenseitig ansprechen können, und statt das über getElementsByTagName mit anschließender Abfrage des name-Attributs oder gar einer ID zu machen (die ja dokumentweit eindeutig sein muss), könnte man es eben über die immer gleichen Namen lösen, mit einer Methode parentNode.getElementsByName, die man sich aber leider erst basteln muss.

                Oder hat jemand zufällig sowas rumliegen?

                Gruß, Don P

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Mit Button Text und Color ändern

                  Don P
                  – Informationen zu den Bewertungsregeln

                  Hallo,

                  Oder hat jemand zufällig sowas rumliegen?

                  Hab's schon selber:

                  Node.prototype.getElementByName = function(name){  
  
  var nodes = this.getElementsByTagName('*');  
  for(var i=0,node=nodes[i];node;node=nodes[++i]){if(node.name===name){return node;}}  
}

                  Natürlich nicht für den IE, der keinen Zugriff auf Node.prototype zulässt.
                  Aber für den programmier' ich auch nicht :-)

                  Gruß, Don P

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln