input Hintergrund mit JavaScript wechseln

[Sandra]

Hallo,
Ich wollte, dass meine inputs in einem Formular blau sind, wenn kein Cursor darüber ist, und das sie weiß sind, wenn ein Cursor darüber ist.
Folgendes habe ich mir gedacht:
var o;
for(var i = 0; i <= document.getElementsByTagName("input"); i++){
  o = document.getElementsByTagName("input")[i];
  o.style.backgroundColor = "#006196";
  o.onmouseover = MouseOver(o);
  o.onmouseout = MouseOut(o);
  o = null;
}

function MouseOver(o){
  o.style.backgroundColor = "#ffffff";
}
function MouseOut(o){
  o.style.backgroundColor = "#006196";
}
Aber warum funktioniert es nicht?
Grußl, Sandra

[Christoph Schnauß]

hallo Sandra,

Ich wollte, dass meine inputs in einem Formular blau sind, wenn kein Cursor darüber ist, und das sie weiß sind, wenn ein Cursor darüber ist.
[...]
Aber warum funktioniert es nicht?

Rufe die Seite mit deinem Code mal im mozilla auf. Der hat eine nette Javascriptkonsole, die dir recht genaue Fehlerbeschreibungen liefert und dir ziemlich genau sagt, wo der Fehler liegt.

Grüße aus Berlin

Christoph S.

[Sandra]

Rufe die Seite mit deinem Code mal im mozilla auf. Der hat eine nette Javascriptkonsole, die dir recht genaue Fehlerbeschreibungen liefert und dir ziemlich genau sagt, wo der Fehler liegt.

Mozilla hat zeigt aber keinen Fehler an.

[MatzeA]

Servus,

poste doch mal den code bzw. die Seite.

Gruss Matze

[Sandra]

poste doch mal den code bzw. die Seite.

JavaScript:
var o;
for(var i = 0; i <= document.getElementsByTagName("input"); i++){
  o = document.getElementsByTagName("input")[i];
  o.style.backgroundColor = "#006196";
  o.onmouseover = MouseOver(o);
  o.onmouseout = MouseOut(o);
  o = null;
}

function MouseOver(o){
  o.style.backgroundColor = "#ffffff";
}
function MouseOut(o){
  o.style.backgroundColor = "#006196";
}

[Christoph Schnauß]

hallo Matze,

poste doch mal den code bzw. die Seite.

du hättest an [pref:t=69779&m=401600] sehen können, daß Sandra völlig korrekt den Code bereits gepostet hat, in dem sie ihren Fehler vermutet.

Wenn nun der mozilla keinem Javascript-Fehler liefert, wie sie unten in [pref:t=69779&m=401624] sagt, dann liegt der Fehler wahrscheinlich woanders. Ich kann an dem von Sandra geposteten Code-Schnipsel übrigens auch nichts erkennen, was _grundsätzlich_ falsch wäre  -  ich hab aber noch keine Lust gehabt, den Schnipsel zu vervollständigen und in einer Testseite gegenzuprüfen.

Also muß man schauen, wo und wie dieser Codeschnipsel weiterverarbeitet bzw. in der Seite aufgerufen wird. Der "Fehler" wird wahrscheinlich an anderer Stelle liegen.

Grüße aus Berlin

Christoph S.

[MatzeA]

Servus,

verzeih ich war blind oder blöd?? :-))

Gruss Matze

[Andreas Schneider]

Hallo Sandra,

ich nehme mal an, das Script steht im Headbereich der Seite. Wenn es ausgeführt wird, gibt es auf der Seite aber noch keine Input-Elemente, die Schleife macht also garnichts. Daher solltest Du das Folgende in eine Funktion packen, die Du onLoad aufrufst:

var o;
for(var i = 0; i <= document.getElementsByTagName("input"); i++){
  o = document.getElementsByTagName("input")[i];
  o.style.backgroundColor = "#006196";
  o.onmouseover = MouseOver(o);
  o.onmouseout = MouseOut(o);
  o = null;
}

Grüße
Andreas

[Andreas Schneider]

Hallo nochmal,

und das hier

for(var i = 0; i <= document.getElementsByTagName("input"); i++){

muß heissen

for(var i = 0; i < document.getElementsByTagName("input").length; i++){

Grüße
Andreas

[Christoph Schnauß]

hi Andreras,

und das hier

for(var i = 0; i <= document.getElementsByTagName("input"); i++){
muß heissen
for(var i = 0; i < document.getElementsByTagName("input").length; i++){

ähm, warum "muß" das so sein? Im übrigen hast du mit deiner Aussage in [pref:t=69779&m=401657] "ich nehme mal an, das Script steht im Headbereich der Seite. Wenn es ausgeführt wird, gibt es auf der Seite aber noch keine Input-Elemente" wahrscheinlich recht. Eine Abhilfe (obwohl ich sie nicht sehr glcüklich finde) könnte sein, auch die Eingabefelder erst mit Javascript schreiben zu lassen und danach die hier diskutierte Funktion aufzurufen.

Solche Spielerchen an der Farbgebung mögen für einen ästhetische Ansprüche stellenden Bastler interessant sein. Beschränkt man die Realisierung auf eine clientseitige Technologie, kann es aber allerhand böse Überraschungen geben. Die Aufgabenstellung ließe sich wahrscheinlich auch mit PHP oder PERL lösen und wäre dann eventuell zuverlässig.

Grüße aus Berlin

Christoph S.

[Andreas Schneider]

Hallo Christoph,

muß heissen

for(var i = 0; i < document.getElementsByTagName("input").length; i++){

ähm, warum "muß" das so sein?

getElementsByTagName("input") liefert ein Array zurück. Dieses hat die Eigenschaft length. Daher sollte die Schleife so aussehen wie oben, und nicht wie von Sandra beschrieben.

Eine Abhilfe (obwohl ich sie nicht sehr glcüklich finde) könnte sein, auch die Eingabefelder erst mit Javascript schreiben zu lassen und danach die hier diskutierte Funktion aufzurufen.

Wenn sie die Schleife in eine Funktion packt und onLoad aufruft, ist ein solches Javascriptkonstrukt nicht notwendig.

Solche Spielerchen an der Farbgebung mögen für einen ästhetische Ansprüche stellenden Bastler interessant sein. Beschränkt man die Realisierung auf eine clientseitige Technologie, kann es aber allerhand böse Überraschungen geben. Die Aufgabenstellung ließe sich wahrscheinlich auch mit PHP oder PERL lösen und wäre dann eventuell zuverlässig.

Da stimme ich Dir zu.

Grüße
Andreas

[wahsaga]

hi,

Ich wollte, dass meine inputs in einem Formular blau sind, wenn kein Cursor darüber ist, und das sie weiß sind, wenn ein Cursor darüber ist.

warum nutzt da dafür nicht CSS?
die pseudo-klassen :hover und evtl. auch :focus können dir dabei helfen.

klar, der dummbrowser versteht es nicht - aber da es nur eine optische spielerei ist, müssen die benutzers dieses unfähigen programmes dann halt darauf verzichten. m.E. aber immer noch die bessere alternative, anstatt für einen so einfach per CSS realisierbaren effekt anzufangen, mit javascript rumzueiern ...

gruss,
wahsaga