Textfeld ausgabe Farbe zuweisen?

[trueTom]

Hi,

wie kann man den Text, der in einem Textfeld angezeigt wird eine Farbe zuweisen?

document.form.antwort.value ='richtig'; // dieses grün

document.form.antwort.value ='falsch'; // dieses soll rot sein

und noch eine allgemeine Frage: wo liegt der unterschied zwischen " und '?
"richtig" 'richtig' dabei merke ich keinen unterschied?!?

Vielen Dank

[Alexander]

Hallo

document.form.antwort.value ='richtig'; // dieses grün

document.getElementsByName("antwort").style.color = "#00FF00";

document.form.antwort.value ='falsch'; // dieses soll rot sein

document.getElementsByName("antwort").style.color = "#FF0000";

Du ermittelst ja irgendwie die Antworten. Mit der Antwort kannst Du dann in einer If-Abfrage ermitteln, welcher Wert es ist und entsprechend die Farbe zuweisen.

und noch eine allgemeine Frage: wo liegt der unterschied zwischen " und '?
"richtig" 'richtig' dabei merke ich keinen unterschied?!?

Das ist richtig. Eigentlich gibt in der praktischen Anwendung keinen. Nur was machst Du denn, wenn innerhalb Deiner Ausgabe ein Anführungszeichen verwenden willst. Du mußt es maskieren oder kannst es auschreiben, wenn Du den String mit ' angefangen hast.

Tschö...

Alex :)

[trueTom]

Vielen Dank :)

[trueTom]

mhh ich sehe gerade das es nicht mit dem IE 4.0 funktionier!?
Ich suche eine Möglichkeit die den NS 4.7 und der IE 4.0 unterstützt?!
 oder ich habe etwas falsch eingegeben!?
Danke

[Alexander]

Hiho,

oder ich habe etwas falsch eingegeben!?

Nee, hast Du nicht. Das unterstützt nur der IE, glaube ich, ab 5.5 und der Netsacape6/Mozilla.

Das hängt damit zusammen, daß der IE < 5.5 kein DOM unterstützt. Ebenso wie der Netsacpe 4.x. Der kann auch kein DOM. Ob es mit den Netsacpe 4.x überhaupt klappt weiß ich nicht. Mit dem IE 4 klappt es aber über das all-Objekt. Bedenke, dass das all-Objekt nur der IE kann. Enn Du nun getElementsByName() weg lässt, geht es im Mozilla/Netscape 6 nicht mehr.

Nun ja, hier jedenfalls die Syntax, damit es im IE >= 4 und Mozilla klappt:

Für IE > 5 und Mozilla/Netscape 6:
document.getElementsById("antwort").style.color = "#00FF00";
                      ^^

Für IE >= 4:
document.all.antwort.style.Color = "#00FF00";

Es gibt aber noch eine kleine Sache zubeachten: Im Textfeld selbst muß noch ein id="antwort" eingefügt werden.

Am besten fragst Du mit
if (document.getElementsById) { browser="dom" } else if (document.all) { brwoser="ie4" } else { browser="nn4" } ab, welchen Browser Du hast.

Mit dieser Abfrage erfährst Du, ob der Browser DOM beherscht (für den 1. Fall), wenn nicht, ob er das all-Objekt kennt (für den 2. Fall), und wenn das auch nicht, dann habe ich keine Lösung für Dich. Ich vermute mal, daß der NN4.x das nicht kann, da seine CSS-Fähigkeiten doch recht bescheiden sind.

Viele Grüße....

Alex :)

[trueTom]

schade auch mit dem neuen Befehl wird der Text nicht farbig angezeigt :(.
Es kommt zwar keine Fehlermeldung, aber er ist schwarz :(

function falsch()
{
document.all.antwort.style.Color = "#FF0000";
document.form.antwort.value ='falsch'; // dieses soll rot sein
window.setTimeout('Beginn()',1000);
}

[Alexander]

document.all.antwort.style.Color = "#FF0000";

^^^

"color" muß klein geschrieben werden. War mein fehler. Sorry!
Dann sollte es aber klappen, sofern im Textfeld noch id="antwort" steht.

Bsp: <input type="text" name="antwort" id="antwort">

Viel Erfolg...

Alex :)

[trueTom]

coool :) jetzt klappt es :).

Darf ich Dein großes Wissen noch einmal strapazieren?

Ist es auch möglich inerhalb des Textfeldes manchen in rot und manches in einer anderen Farbe anzuzeigen?

Vielen Dank :)

Wahrscheinlich geht das nicht :( und man muss in Netscape auf Layer ausweichen :(, welche dann so schwierig zu positionieren sind :(.
Oder kennt nescape noch eine Art document.write an eine bestimmte stelle?

[Alexander]

Hallo trueTom,

Darf ich Dein großes Wissen noch einmal strapazieren?

Sicher, aber so groß ist mein Wissen im Vergleich mit einigen anderen hier im Forum nun auch nicht...

Ist es auch möglich inerhalb des Textfeldes manchen in rot und manches in einer anderen Farbe anzuzeigen?

Nein, das geht nicht. Da mußt Du schon auf Layer zurückgreifen. Das ist aber garnicht so schwierig, wie es sich anhört.
<div id="antwort">Richtig</div> und schon hast Du Deinen Layer. Mit dem bekannten all-Objekt oder mittels DOM kannst Du dann darauf zugreifen, Werte und Attribute ändern. Schau Dir einfach mal die Kapitel in SelfHTML an. Du wirst sehen, daß solch "einfache" Sachen sehr leicht und schnell zu realisieren sind.

Wahrscheinlich geht das nicht :( und man muss in Netscape auf Layer ausweichen :(, welche dann so schwierig zu positionieren sind :(.

Du brauchst die Layer ja garnicht zu positionieren. Betrachte sie wie ein rechteckiges "Ding", dass Du wie eine Grafik in Deine Seite einbaust. Du willst dieses Ding ja nicht verschieben oder über den Bildschirm wandern lassen, sondern nur seine Attribute und seinen Inhalt ändern. Das geht recht einfach.

Im übrigen haben die Netscape-Layer im NN 4 (<layer>) nichts mit den "normalen" Layern (<div>) zu tun. Ich würde an Deiner Stelle auf NN4 keine Rücksicht mehr nehmen.

Oder kennt nescape noch eine Art document.write an eine bestimmte stelle?

Nun, das wird Dir vermutlich nicht viel bringen, da Du die Werte nur einmal ausgeben könntest und dann nicht mehr verändern könntest. Und das scheinst Du ja zu machen, sonst wäre der Timeout ja vermutlich nutzlos.

Viele Grüße...

Alex :)

[trueTom]

Vielen Dank!

Das was ich umsetzte muß leider auch im NN 4 gehen(Es soll im Intranet laufen.. und die Benutzter haben größtenteils NN4..), da müsste ich dann auch diese komischen <layer> zurückgreifen und eine Browserunterscheindung machen...

ich bleibe dann lieber bei dem Textfeld, wobei man bei dem ja leider nicht die Ränder deaktivieren kann, zumindest nicht in NN4...

Ich wünsche Dir noch einen schönen Tag!

Gruß

trueTom

[Thomas Schmieder]

Vielen Dank!

Das was ich umsetzte muß leider auch im NN 4 gehen(

Hallo trueTom,

da habe ich eine Idee für Dich:

<html>
<head>
  <title>Tabellen-Spiele</title>

<script language="JavaScript" type="text/javascript">
  <!--
  function wxlBgCol(id,farbe)
  {
     if (document.all)
        document.all[id].style.backgroundColor=farbe;
     else
        if (document.getElementById)
          document.getElementById(id).style.backgroundColor=farbe;
        else
           if (document.layers)
              document.layers[id].bgColor=farbe;
  }

function getText(id)
  {
     if (document.all)
     {
       alert(document.all[id].innerText);
    if (document.all[id].innerText=='ganz neuer Text')
        document.all[id].innerText='noch ein anderer Text';
    else
        document.all[id].innerText='ganz neuer Text';
  }
  else
        if (document.getElementById)
         alert(document.getElementById(id).innerText);
        else
           if (document.layers)
              alert(document.layers[id].innerText);
  }
  //-->
  </script>

</head>

<body>
<table border="1">
  <tr>
     <td id="Zelle1" style="position:relative" bgcolor="white">
    Text der ersten Zelle
  </td>
     <td id="Zelle2" style="position:relative">
    Text der zweiten Zelle
  </td>
  </tr>

<tr>
     <td id="Zelle3" style="position:relative">
    Text der dritten Zelle
  </td>
     <td id="Zelle4" style="position:relative">
    Text der vierten Zelle
  </td>
  </tr>
</table>

<form action="" name="Daten" ID="Daten">
  <input type="text" name="Feld1" ID="Feld1" style="position:relative;background-color:#FF7777"><br>
  <input type="text" name="Feld2" ID="Feld2" style="position:relative"><br>
  <input type="text" name="Feld3" ID="Feld3" style="position:relative"><br>
  <input type="text" name="Feld4" ID="Feld4" style="position:relative"><br>

<input type="button" value="Zelle 1" size="10"onClick="getText('Zelle1')">
  <input type="button" value="Zelle 2" onClick="getText('Zelle2')">
  <input type="button" value="Zelle 3" onClick="getText('Zelle3')">
  <input type="button" value="Zelle 4" onClick="getText('Zelle4')">
  <br>
  <input type="button" value="Farbe 1" onClick="wxlBgCol('Zelle1','#FF0000')">
  <input type="button" value="Farbe 2" onClick="wxlBgCol('Zelle1','#00FF00')">
  <input type="button" value="Farbe 3" onClick="wxlBgCol('Zelle1','#0000FF')">
  <input type="button" value="Farbe 4" onClick="wxlBgCol('Zelle1','#777777')">
  <br>
  <input type="button" value="dies ist Feld 1" size="10" onClick="wxlBgCol('Feld1','#FF0000')">
  <input type="button" value="Feld 2" size="10" onClick="wxlBgCol('Feld1','#00FF00')">
  <input type="button" value="Feld 3" onClick="wxlBgCol('Feld1','#0000FF')">
  <input type="button" value="Feld 4" onClick="wxlBgCol('Feld1','#777777')">

</form>
</body>
</html>

Tabellen gehen auch im NS-Browser. Dann musst die Felder eben in Tabellen setzen und ein cellpadding vereinbaren. Das müßte dann als farbiger Rand rings um das inputfeld erscheinen. So habe ich es jedenfalls gelöst.

Gruß

Tom (der einzig Echte)

[trueTom]

Vielen Dank!

Ich lese mich mal in Deinen Vorschlag rein. Brauche etwas länger bin nicht so der Programmierer...

Alles Liebe
trueTom

[trueTom]

Hi,
so ich habe es nun mal getestet.

IM IE funktioniert alles wunderbar bis auf er ändert nicht die Farbe bei den anderen Textfeldern..

Im Netscape funktioniert leider nur das Zellenhintergrund ändern :(.

Vielen Dank für Deine Hilfe!

[Thomas Schmieder]

Hi,
so ich habe es nun mal getestet.

IM IE funktioniert alles wunderbar bis auf er ändert nicht die Farbe bei den anderen Textfeldern..

Im Netscape funktioniert leider nur das Zellenhintergrund ändern :(.

Vielen Dank für Deine Hilfe!

Ja hallo Tom,

das stimmt. Netscape hat da sehr wenig Lust. Zudem ändert der nicht wirklich den Zellenhintergrund, sondern den Hintergrund der Schrift in der Zelle. Da muss man dann noch vor und nach dem input-Feld ein   einbauen

Iast schon zum K... mit dem NS-Browser

Tom