DerAsmo: Einfärbung von Textteilen

SELF-Forum

Einfärbung von Textteilen

DerAsmo
– Informationen zu den Bewertungsregeln

Hallo,
ich habe mich heute mit der Einfärbung von Textpassagen bei einem Event beschäftigt. Genauer soll über Checkboxen (oder eventuell Radiobuttons) eine Auswahl getroffen werden, nach der bestimmte Textstellen dann eingefärbt werden sollen.

Ich werde kurz den größeren Rahmen erläutern, um Fragen im Vornherein zu beseitigen. Es wird eine XML-Datei in eine HTML-Datei überführt, diese soll XHTML-Konform sein. In der XML-Datei werden bestimmt Wörter oder Wortgruppen ausgezeichnet, zB alle Substantive oder meinetwegen alle Nahrungsmittel. In der HTML soll dann durch Auswahl der Gruppe, diese kenntlich gemacht werden.

Ich habe jetzt zum Testen ein kleines Beispiel zusammengeschußtert, dass auf den ersten Blick garnicht so schlecht aussah.

<html>  
 <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title>Checkboxtest</title>  
  
<script type="text/javascript">  
  function MachFarbig() {  
    if (document.Auswahl.Farbe[0].checked == true) { document.all.RedText.style.backgroundColor = "red"; }  
    else { document.all.RedText.style.backgroundColor = "white"; }  
    if (document.Auswahl.Farbe[1].checked == true) { document.all.GreenText.style.backgroundColor = "green"; }  
    else { document.all.GreenText.style.backgroundColor = "white"; }  
    if (document.Auswahl.Farbe[2].checked == true) { document.all.BlueText.style.backgroundColor = "blue"; }  
    else { document.all.BlueText.style.backgroundColor = "white"; }  
}  
</script>  
  
 </head>  
 <body>  
  
    <form name="Auswahl">  
        <p>  
        <input type="radio" onclick="MachFarbig()" name="Farbe" value="red"> Rot  
        <input type="radio" onclick="MachFarbig()" name="Farbe" value="green"> Gruen  
        <input type="radio" onclick="MachFarbig()" name="Farbe" value="blue"> Blau  
      </p>  
    </form>  
  
    <div style="width:70%;">  
      <strong>Text.</strong>  
      <p style="text-align:justify; text-size:11pt; margin-top:5px">  
        Hier steht ein langer Text. Bei Auswahl der Checkboxen soll an verschiedenen Textstellen die Hintergrundfarbe gewechselt werden, wenn die entsprechende Box gesetzt ist. Das Wort <span id="RedText">Rot</span> soll immer einen roten Hintergrund haben, <span id="GreenText">Gruen</span> soll einen gruenen Hintergrund bekommen und <span id="BlueText">Blau</span> entsprechend einen blauen Hintergrund.  
      </p>  
    </div>  
 </body>  
</html>

Das funktioniert schonmal, sobald ich aber ein weiteres span einfüge (ich möchte ja mehrere Wörter markiert haben), mit der ID "RedText" zB, dann wird garkeine der Farben mehr gesetzt.

Wenn das schonmal klappen würde, wäre ich glücklich.
Aber vielleicht wäre es noch schön, sich manchmal mehrere Gruppen anzeigen zu lassen, also das Ganze über Checkboxen zu machen. Dann wäre es aber Möglich, dass Wörter zu verschiedenen Gruppen gehören. Ist es möglich diese Fälle abzufangen und die Farben dann zu mischen? Wie gesagt, das ist nur eine Überlegung am Rande und kann ignoriert werden falls es keine spontane Lösung gibt.

Ich freue mich über Antwort, DerAsmo.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Einfärbung von Textteilen

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Das funktioniert schonmal, sobald ich aber ein weiteres span einfüge (ich möchte ja mehrere Wörter markiert haben), mit der ID "RedText" zB, dann wird garkeine der Farben mehr gesetzt.

    Du weisst, dass eine id pro document einmalig sein muss?

    Wenn das schonmal klappen würde, wäre ich glücklich.

    verwende class

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Einfärbung von Textteilen

    Der Martin
    +1 Informationen zu den Bewertungsregeln

    Hi,

    du hast in deinem Codebeispiel einige Sünden und Unbeholfenheiten drin. Zunächst die Sünden. :-)

    if (document.Auswahl.Farbe[0].checked == true) { document.all.RedText.style.backgroundColor = "red"; }

    Du verwendest hier document.all, eine reine Microsoft-Erfindung. Andere Browser wie z.B. Opera und eingeschränkt sogar Firefox spielen zwar kulanterweise auch mit, es ist aber besser, zu vergessen, dass es je so etwas wie das all-Objekt des IE4 gegeben hat.

    Das funktioniert schonmal, sobald ich aber ein weiteres span einfüge (ich möchte ja mehrere Wörter markiert haben), mit der ID "RedText" zB, dann wird garkeine der Farben mehr gesetzt.

    Damit willst du hoffentlich nicht andeuten, dass du mehrere Elemente mit derselben ID haben möchtest? Das ist nicht zulässig. Ein ID-Wert muss in einem Dokument eindeutig sein und darf demzufolge nur einmal vorkommen. Du möchtest das Konzept wohl eher mit Klassen als mit IDs realisieren.

    Nun zum Unbeholfenen.

    if (document.Auswahl.Farbe[0].checked == true) ...

    "Wenn es wahr ist, dass x wahr ist, ..."

    Diese Formulierung sieht man immer wieder; ich weiß nicht, wer die zum ersten Mal verwendet hat. Wenn ich den erwische, trete ich ihn in den Hintern, bis er lacht. Und dann nochmal, weil er lacht.
    Ein einfaches

    if (document.Auswahl.Farbe[0].checked)

    erfüllt genau denselben Zweck und ist leichter lesbar. Da die checked-Eigenschaft bereits einen boolschen Wert hat, ist es unnötig, diesen nochmal mit der Konstanten true zu vergleichen, um einen boolschen Wert als Ergebnis zu bekommen.

    Aber vielleicht wäre es noch schön, sich manchmal mehrere Gruppen anzeigen zu lassen

    Und da zu einer Gruppe mehrere Textabschnitte gehören können, darf man sie nicht mit IDs markieren, sondern am besten mit Klassen. Die gewünschten Elemente sucht man sich dann mit getElementsByClassName() heraus - dabei beachten, dass es mehrere sein können - und setzt oder löscht bei den so ermittelten Elementen eine zusätzliche Klasse. Die Darstellung regelt man dann ausschließlich übers externe Stylesheet.

    Dann wäre es aber Möglich, dass Wörter zu verschiedenen Gruppen gehören. Ist es möglich diese Fälle abzufangen und die Farben dann zu mischen?

    Denkbar, dann hat ein Abschnitt halt mehrere Klassen, und man muss jede Kombination im CSS einzeln definieren.

    So long,
     Martin

    --
    Man soll den Tag nicht vor dem Abend loben.
    Und den Mann nicht vor dem Morgen.
      (alte Volksweisheit)
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Einfärbung von Textteilen

      DerAsmo
      – Informationen zu den Bewertungsregeln

      Hi,

      du hast in deinem Codebeispiel einige Sünden und Unbeholfenheiten drin. Zunächst die Sünden. :-)

      if (document.Auswahl.Farbe[0].checked == true) { document.all.RedText.style.backgroundColor = "red"; }

      Du verwendest hier document.all, eine reine Microsoft-Erfindung. Andere Browser wie z.B. Opera und eingeschränkt sogar Firefox spielen zwar kulanterweise auch mit, es ist aber besser, zu vergessen, dass es je so etwas wie das all-Objekt des IE4 gegeben hat.

      Das funktioniert schonmal, sobald ich aber ein weiteres span einfüge (ich möchte ja mehrere Wörter markiert haben), mit der ID "RedText" zB, dann wird garkeine der Farben mehr gesetzt.

      Damit willst du hoffentlich nicht andeuten, dass du mehrere Elemente mit derselben ID haben möchtest? Das ist nicht zulässig. Ein ID-Wert muss in einem Dokument eindeutig sein und darf demzufolge nur einmal vorkommen. Du möchtest das Konzept wohl eher mit Klassen als mit IDs realisieren.

      Ah, da hatte ich wohl eindeutig ein Verständnisproblem. Ich war der Meinung, dass ich damit die ID der Vorlage angebe. Dann ist klar warum das nicht funktionieren kann. Vielen Dank.

      Nun zum Unbeholfenen.

      if (document.Auswahl.Farbe[0].checked == true) ...

      "Wenn es wahr ist, dass x wahr ist, ..."

      Diese Formulierung sieht man immer wieder; ich weiß nicht, wer die zum ersten Mal verwendet hat. Wenn ich den erwische, trete ich ihn in den Hintern, bis er lacht. Und dann nochmal, weil er lacht.
      Ein einfaches

      if (document.Auswahl.Farbe[0].checked)

      erfüllt genau denselben Zweck und ist leichter lesbar. Da die checked-Eigenschaft bereits einen boolschen Wert hat, ist es unnötig, diesen nochmal mit der Konstanten true zu vergleichen, um einen boolschen Wert als Ergebnis zu bekommen.

      Du hast recht, das war mir auch erst übel aufgestoßen. Ich hattes es aber per Copy&Paste übernommen und dann aus Faulheit einfach stehen lassen.

      Aber vielleicht wäre es noch schön, sich manchmal mehrere Gruppen anzeigen zu lassen

      Und da zu einer Gruppe mehrere Textabschnitte gehören können, darf man sie nicht mit IDs markieren, sondern am besten mit Klassen. Die gewünschten Elemente sucht man sich dann mit getElementsByClassName() heraus - dabei beachten, dass es mehrere sein können - und setzt oder löscht bei den so ermittelten Elementen eine zusätzliche Klasse. Die Darstellung regelt man dann ausschließlich übers externe Stylesheet.

      Dann wäre es aber Möglich, dass Wörter zu verschiedenen Gruppen gehören. Ist es möglich diese Fälle abzufangen und die Farben dann zu mischen?

      Denkbar, dann hat ein Abschnitt halt mehrere Klassen, und man muss jede Kombination im CSS einzeln definieren.

      Das wäre dann etwas zuviel Aufwand, bei Minimum 7 verschiedenen Gruppen sprengt das schon das Aufwand/Nutzen - Verhältnis.

      So long,
      Martin

      Deine Hinweise haben mir auf jedenfall viele Anregungen gegeben.
      Vielen Dank dafür!

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Einfärbung von Textteilen

      Gunnar Bittersmann Homepage des Autors
      +1 Informationen zu den Bewertungsregeln

      @@Der Martin:

      nuqneH

      Du verwendest hier document.all […]
      Damit willst du hoffentlich nicht andeuten, dass du mehrere Elemente mit derselben ID haben möchtest? […] Du möchtest das Konzept wohl eher mit Klassen als mit IDs realisieren.
      "Wenn es wahr ist, dass x wahr ist, ..." […] ist es unnötig, diesen nochmal mit der Konstanten true zu vergleichen, um einen boolschen Wert als Ergebnis zu bekommen.

      Bis hierher full ACK.

      Die gewünschten Elemente sucht man sich dann mit getElementsByClassName() heraus - dabei beachten, dass es mehrere sein können - und setzt oder löscht bei den so ermittelten Elementen eine zusätzliche Klasse.

      Nei-en!

      „Und es wird auch immer wieder erwähnt, dass [getElementsByClassName] im Zusammenhang mit CSS meist völlig überflüssig ist.“

      Man gibt einem Vorfahrenelement (body oder html bieten sich an) eine Klasse. Wie oft denn noch?

      Die Darstellung regelt man dann ausschließlich übers externe Stylesheet.

      Das allerdings.

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

      1. Einfärbung von Textteilen

        Der Martin
        – Informationen zu den Bewertungsregeln

        Hallo Gunnar,

        Die gewünschten Elemente sucht man sich dann mit getElementsByClassName() heraus - dabei beachten, dass es mehrere sein können - und setzt oder löscht bei den so ermittelten Elementen eine zusätzliche Klasse.

        Nei-en!
        „Und es wird auch immer wieder erwähnt, dass [getElementsByClassName] im Zusammenhang mit CSS meist völlig überflüssig ist.“
        Man gibt einem Vorfahrenelement (body oder html bieten sich an) eine Klasse. Wie oft denn noch?

        bitte lies das Anforderungsprofil (siehe Eröffnungsposting) nochmal konzentriert.
        Und dann sag mir, wie du eine unterschiedliche Darstellung von drei, möglicherweise bis zu sieben Gruppen von Elementen (unabhängig voneinander und möglicherweise auch gleichzeitig) realisieren willst, indem du body oder html eine zusätzliche Klasse gibst. Ich bin gespannt.

        So long,
         Martin

        --
        Die letzten Worte des Systemadministrators:
        Nur gut, dass ich ein intaktes Backup habe.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Einfärbung von Textteilen

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@Der Martin:

          nuqneH

          bitte lies das Anforderungsprofil (siehe Eröffnungsposting) nochmal konzentriert.
          Und dann sag mir, wie du eine unterschiedliche Darstellung von drei, möglicherweise bis zu sieben Gruppen von Elementen (unabhängig voneinander und möglicherweise auch gleichzeitig) realisieren willst,

          Warum sollte ich das wollen? Davon steht nichts im Eröffnungsposting.

          Im UI sind Radiobuttons; von denen ist genau einer aktiv, nicht „drei, möglicherweise bis zu sieben“.

          Tja, wenn es Checkboxen wären …

          indem du body oder html eine zusätzliche Klasse gibst. Ich bin gespannt.

          … wäre das auch kein Problem. Ein Element kann mehrere Klassenzugehörigkeiten haben. Hinzufügen einer Klasse ist trivial, beim Wegnehmen einer Klasse muss man halt dafür sorgen, dass die anderen bestehenbleiben.

          Mit jQuery oder einem anderen Framework ist auch das trivial.

          Qapla'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. Einfärbung von Textteilen

        DerAsmo
        – Informationen zu den Bewertungsregeln

        Vielen Dank. So wars dann doch einfacher. Die Variante mit dem getElementsByClassName hatte ich dann doch nicht hinbekommen.

        So funktionierts:

        <html>  
 <head>  
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
	<title>Checkboxtest</title>  
  
<script type="text/javascript">  
  function MachFarbig() {  
    if (document.Auswahl.Farbe[0].checked) { document.body.className = "highlightRed"; }  
    if (document.Auswahl.Farbe[1].checked) { document.body.className = "highlightGreen"; }  
    if (document.Auswahl.Farbe[2].checked) { document.body.className = "highlightBlue"; }  
}  
</script>  
  
<style type="text/css">  
  .highlightRed .redText { background-color: #ff0000; }  
  .highlightGreen .greenText { background-color: #00ff00; }  
  .highlightBlue .blueText { background-color: #0000ff; }  
</style>  
  
 </head>  
 <body>  
  
	<form name="Auswahl">  
  	  <p>  
	    <input type="radio" onclick="MachFarbig()" name="Farbe" value="red"> Rot  
	    <input type="radio" onclick="MachFarbig()" name="Farbe" value="green"> Gruen  
	    <input type="radio" onclick="MachFarbig()" name="Farbe" value="blue"> Blau  
	  </p>  
	</form>  
  
	<div style="width:70%;">  
	  <strong>Text.</strong>  
	  <p style="text-align:justify; text-size:11pt; margin-top:5px">  
	    Hier steht ein langer Text. Bei Auswahl der Checkboxen soll an verschiedenen Textstellen die Hintergrundfarbe gewechselt werden, wenn die entsprechende Box gesetzt ist. Das Wort <span class="redText">Rot</span> soll immer einen roten Hintergrund haben, <span class="greenText">Gruen</span> soll einen gruenen Hintergrund bekommen und <span class="blueText">Blau</span> entsprechend einen blauen Hintergrund. <span class="redText">Rot</span>, <span class="greenText">Gruen</span> und <span class="blueText">Blau</span>.  
	  </p>  
	</div>  
 </body>  
</html>
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  3. Einfärbung von Textteilen

    DerAsmo
    – Informationen zu den Bewertungsregeln 
    <html>  
 <head>  
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
	<title>Checkboxtest</title>  
  
<script type="text/javascript">  
  function MachFarbig() {  
    if (document.Auswahl.Farbe[0].checked) { document.getElementsByClassName("redText").backgroundColor = "red"; }  
    else { document.getElementsByClassName("redText").backgroundColor = ""; }  
    if (document.Auswahl.Farbe[1].checked) { document.greenText.backgroundColor = "green"; }  
    else { document.greenText.backgroundColor = ""; }  
    if (document.Auswahl.Farbe[2].checked) { document.blueText.backgroundColor = "blue"; }  
    else { document.blueText.backgroundColor = ""; }  
}  
</script>  
  
<style type="text/css">  
  .redText { background-color: #00ffff; }  
  .blueText { background-color: #00ffff; }  
  .greenText { background-color: #00ffff; }  
</style>  
  
 </head>  
 <body>  
  
	<form name="Auswahl">  
  	  <p>  
	    <input type="radio" onclick="MachFarbig()" name="Farbe" value="red"> Rot  
	    <input type="radio" onclick="MachFarbig()" name="Farbe" value="green"> Gruen  
	    <input type="radio" onclick="MachFarbig()" name="Farbe" value="blue"> Blau  
	  </p>  
	</form>  
  
	<div style="width:70%;">  
	  <strong>Text.</strong>  
	  <p style="text-align:justify; text-size:11pt; margin-top:5px">  
	    Hier steht ein langer Text. Bei Auswahl der Checkboxen soll an verschiedenen Textstellen die Hintergrundfarbe gewechselt werden, wenn die entsprechende Box gesetzt ist. Das Wort <span class="redText">Rot</span> soll immer einen roten Hintergrund haben, <span class="greenText">Gruen</span> soll einen gruenen Hintergrund bekommen und <span class="blueText">Blau</span> entsprechend einen blauen Hintergrund.  
	  </p>  
	</div>  
 </body>  
</html>

    So habe ichs jetzt probiert, aber funktionieren tut das noch nicht. Greife ich falsch auf die klasse zu?

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln