Inline-JavaScript-Onclick-Funktion

Lesezeit: 3 Minuten

Toniq

Gibt es eine Möglichkeit, den folgenden Code so inline zu schreiben?

<a href="#" onClick="function(){
    //do something;
    return false;
};return false;"></a>

Anstatt dies zu tun:

 <a href="#" onClick="doSomething(); return false;"></a>

 function doSomething(){
    //do something;
 }

Warum würden Sie wollen?

– Mike Christensen

24. Februar 2014 um 23:50 Uhr
Wieso den? Inline-Code ist schrecklich und nicht wartbar oder wiederverwendbar

– Josh Bedo

24. Februar 2014 um 23:55 Uhr
weil ich es auf der Seite wiederhole und es eingeschränkt halten möchte. und ich möchte doSomething nicht mehrmals wiederholen.

– Toniq

24. Februar 2014 um 23:57 Uhr
@ Toniq Warum müsstest du wiederholen doSomething mehrmals? Erklären Sie es einmal. Wenn Sie bestimmte Daten mit der verknüpfen müssen <a>verwenden ein data-* dort Informationen zuordnen und rendern. Und nicht einstellen onclick im Tag – warten Sie, bis das DOM bereit ist, holen Sie sich alles <a> Elemente, und binden Sie einen Click-Handler an jeden Aufruf doSomething und daran vorbei data-* Attribut, das Sie möglicherweise benötigen.

– Jan

25. Februar 2014 um 0:01 Uhr
@Toniq – Was auch immer Sie versuchen, fügen Sie den Code in eine Funktion ein und rufen Sie diese Funktion in Ihrer auf onclick Handler. Es ist keine gute Idee, mehr als einen oder zwei Befehle in Inline-HTML zu schreiben.

– Mike Christensen

25. Februar 2014 um 0:02 Uhr

Mukund Kumar

Sie können selbstausführende anonyme Funktionen verwenden. Dieser Code wird funktionieren:

<a href="#" onClick="(function(){
    alert('Hey i am calling');
    return false;
})();return false;">click here</a>

Ich befürworte das, aber … wirklich, ich hoffe, Sie haben einen guten Grund, warum Sie Inline-Code schreiben, es ist normalerweise eine schlechte Praxis.

– Quoo

5. November 2015 um 16:41 Uhr
^^ Ich kann sehen, dass es eine schlechte Praxis ist, Code zu wiederholen, aber anonyme Funktionen haben ihren Platz. Ich habe eine Funktion geschrieben, die ein benutzerdefiniertes Boostrap-Bestätigungsmodal aufruft. Ich möchte, dass es eine Situation beim Abbrechen handhabt und für diese Instanz eindeutig bestätigt, wenn ich es brauche. Es ist dumm, die beiden Funktionen woanders zu schreiben und im Code danach suchen zu müssen, wenn sie nicht wiederverwendet werden.

– eaglei22

9. Januar 2017 um 20:41 Uhr
Mein Anwendungsfall dafür ist das Schließen eines Ladebildschirms. Der Onclick löscht den Begrüßungsbildschirm aus dem DOM.

– Jared Menard

28. Februar 2018 um 15:21 Uhr
@JaredMenard versuchen, das Anker-Tag durch div zu ersetzen.

– Mukund Kumar

3. März 2018 um 5:40 Uhr
Ich habe diese Methode nur verwendet, um ein Shim zum Debuggen in eine Seite einzufügen, die ich nicht kontrolliere, sodass ich keine zusätzliche Funktion hinzufügen konnte. Es ist hässlich, aber es funktioniert

– divillywürste

15. November 2018 um 10:54 Uhr

ITomas

Das sollte funktionieren:

 <a href="#" onclick="function hi(){alert('Hi!')};hi()">click</a>

Sie können beliebiges JavaScript in die einfügen onclick als ob Sie die Methode über JavaScript zuweisen würden. Ich denke, es geht nur darum, den Code sauberer zu machen und Ihre js in einem Skriptblock zu halten

Dies wird nicht wirklich empfohlen, aber Sie können das alles so inline machen:

<a href="#" onClick="function test(){ /* Do something */  } test(); return false;"></a>

Aber mir fallen auf Anhieb keine Situationen ein, in denen dies besser wäre, als die Funktion woanders zu schreiben und sie aufzurufen onClick.

Ich habe das versucht und in Firefox bekomme ich: SyntaxError: function statement require a name

– Toniq

24. Februar 2014 um 23:59 Uhr
Würde diese Testfunktion außerhalb des href-Bereichs gehört werden?

– Toniq

25. Februar 2014 um 0:03 Uhr
Ich dachte, es würde im globalen Bereich existieren, aber das scheint nicht zu stimmen. Soweit ich sagen kann Es wird nicht außerhalb des Bereichs dieses Tags existieren, aber ich bin mir nicht sicher, in welchem Bereich es existiert.

– jvdub

25. Februar 2014 um 0:19 Uhr

Basierend auf der Antwort von @Mukund Kumar ist hier eine Version, die das Ereignisargument an die anonyme Funktion übergibt:

<a href="#" onClick="(function(e){
    console.log(e);
    alert('Hey i am calling');
    return false;
})(arguments[0]);return false;">click here</a>

14307200cookie-checkInline-JavaScript-Onclick-Funktion

#anklicken #Javascript