✔ Bei "onmouseover" JS-Funktion aufrufen

[Fools]

Hallo!

Hab da grad ein kleines Problem mit JavaScript.


Folgender Code funktioniert ohne Probleme:

<input type="text" onmouseover="this.style.borderLeft='2px solid red';"></input>

Mit Hilfe einer JS-Funktion bekomme ich das aber leider im Moment nicht hin:

<input type="text" onmouseover="designInput()"></input>

Dazugehöriger JavaScript-Code

function designInput()
{
	this.style.borderLeft='2px solid red';
}

Ich bin mit JS noch nicht so geübt, sodass ich nur vermuten kann, dass in meiner JS-Funktion die Zeile "this.style.borderLeft='2px solid red';" nicht ganz regelkonform ist.

Deshalb meine Frage: Wie muss ich die JS-Funktion so umcodieren, sodass sie genau das gleiche macht, wie mein funktionierender Code?

Für Eure Hilfe wäre ich Euch dankbar.

 

[sheel]

Ich bin mir nicht ganz sicher, aber meiner Meinung nach ist das this das Problem.

Gib dem input eine id und sprich es über die ID an.

 

[Sven Mintel]

Moin,

die Funktion designInput() ist, wenn du sie einfach nur so in einem <script> definiert hast, ein Member des globalen Geltungsbereiches(in JS, sofern im Browser ausgeführt, ist dies window).

Verwendest du in dieser Funktion this, ist dies somit ein Zeiger auf dies window-Objekt.

Lösung: übergebe das auslösende Element als Parameter:

<script>
function designInput(obj)
{
    obj.style.borderLeft='2px solid red';
}
</script>
<input type="text" onmouseover="designInput(this)"/>

 

[Fools]

Ich bin mir nicht ganz sicher, aber meiner Meinung nach ist das this das Problem.

Habe ich mir auch schon gedacht. Ohne "this" geht's aber auch nicht.

Gib dem input eine id und sprich es über die ID an.

Das wollte ich vermeiden, denn die Funktion kann von mehreren input-Elementen im Falle von "onmouseover" aufgerufen werden.

 

[Fools]

@ Sven Mintel:

Ja, perfekt! Jetzt funktioniert es einwandfrei.

Vielen vielen Dank für die schnelle Hilfe.