2016-12-30 14 views
1

Ich versuche, einen sehr einfachen Code auszuführen:anonyme Funktion in JavaScript-Fehler

<a href="#" onClick="function(event){ 
    event.preventDefault(); 
    document.getElementById('LogOut-form').submit(); 
}">LogOut</a> 

Ich bin nicht einmal ganz sicher, ob das richtig ist oder nicht, aber wenn ich auf dem Link klicken, ich sehe ein Fehler.

Uncaught SyntaxError: Unexpected token (

Ich möchte nur das Formular unter Verwendung so etwas, senden, gibt es etwas, das ich vermisse? Wenn, ja, was wäre die Lösung?

Antwort

3

Wie Sie Funktion mit onClick Verwendung IIF Ausdruck

<a href="#" onClick="(
       function(event){ 
        event.preventDefault(); 
        document.getElementById('LogOut-form').submit(); 
       })(event) 
      ">LogOut</a> 

<a href="#" onClick="(function(event){event.preventDefault();document.getElementById('LogOut-form').submit();})(event)">LogOut</a> 

oder verwenden Sie keine Funktion Ausdruck

<a href="#" onClick="event.preventDefault(); document.getElementById('LogOut-form').submit();">LogOut</a> 

Allerdings würde ich empfehlen Sie hässlich loszuwerden deklarieren Inline-Click-Handler und keine Inline-Click-Handler in alten und schlechten Praktiken. Sie sollten Ereignis mit addEventListener

HTML

<a href="#" id='logout'>LogOut</a> 

Script

document.querySelector('#logout').addEventListener('click', function(event){ 
    event.preventDefault(); 
    document.getElementById('LogOut-form').submit(); 
}, false); 
+0

Dank mayne, ich kannte die meisten Schritte, ich wollte nur wissen, ob wir das tun können oder nicht.Sie haben geantwortet, bevor jeder.Hinz, Das tick (: –

+0

Auch ... kann man Zeilenumbrüche und solche in einem HTML-Attribut verwenden, so müssen Sie nicht alles in eine Zeile stopfen ... https: //gist.github .com/tschallacka/19877de484a83f28c19b658f27062c52 – Tschallacka

0

Ich denke, binden, dass Sie nicht eine Funktion direkt auf diese Weise aufrufen können, verursachen, dass Code versucht, Erstellen Sie eine neue Funktion und führen Sie diese Funktion nicht aus. Sie sollten irgendwo eine Funktion erstellen und sie unter dem onclick-Ereignis aufrufen. Zum Beispiel:

function myFunction(evt) { 
     evt.preventDefault(); 
     document.getElementById('LogOut-form').submit(); 
    } 

    <a href="#" onClick="myFunction">LogOut</a> 
1

Sie erklären Funktion innerhalb onClick und Sie sollten es nennen. Definieren Sie Ihre Funktion außerhalb und rufen Sie dann von onClick wie myFunction().

2

Sie sollten die on Attribute von HTML-Elementen nicht mehr verwenden. Verwenden Sie stattdessen addEventListener wie in der Antwort von Satpal

Die onclick an der Zeit, die Sie auf den Link klicken ausgewertet, so, wenn Sie wirklich wollen, um zu arbeiten, können Sie es als unmittelbar beschworene Funktion Ausdruck schreiben müssten:

<a href="#" onClick="(function(event){ 
    event.preventDefault(); 
    document.getElementById('LogOut-form').submit(); 
})(event)">LogOut</a> 

Aber Sie sollten es wirklich nicht so machen. Du solltest html, js und css immer getrennt halten.

2

<a href="#" onClick=" 
 
    event.preventDefault(); 
 
    document.getElementById('LogOut-form').submit(); 
 
">LogOut</a>

oder

function sendData (event) { 
 
    event.preventDefault(); 
 
    document.getElementById('LogOut-form').submit(); 
 
}
<a href="#" onClick="sendData()">LogOut</a>

2

Der Kontext Sie versuchen, die Funktion Ausdruck zu verwenden, in erwartet, dass die function Schlüsselwort eine Funktionsdeklaration zu starten.

Eine Funktionsdeklaration muss einen Namen haben.

Es macht keinen Sinn, dort eine Funktion zu setzen: Sie nennen es nie.

Der Wert eines onclick Attributs ist der Funktionskörper.

Wenn Sie diesen Weg gehen würden dann Code, den Sie würde wie folgt aussehen:

onclick="event.preventDefault(); document.getElementById('LogOut-form').submit();" 

Aber tun Sie das nicht!


Intrinsic Ereignis Attribute sind für eine Vielzahl von Gründen schrecklich. Binden Sie Ihre Ereignishandler mit JavaScript.

<a href="#">LogOut</a> 

document.querySelector("a").addEventListener("click", function(event){ 
    event.preventDefault(); 
    document.getElementById('LogOut-form').submit(); 
}); 

Aber nicht, dass entweder tun!


Sie haben einen Link zum Seitenanfang, die Sie dann „Verbesserung“ mit JavaScript ein Formular einzureichen.

Wenn das JavaScript fehlschlägt, macht es keinen Sinn, auf den Anfang der Seite zu verweisen.

Vor der Anwendung von JavaScript: Wählen Sie den HTML-Code mit der am besten geeigneten Semantik und Standardfunktionalität.

In diesem Fall bedeutet das Verwenden Sie eine Senden-Schaltfläche.

<button>LogOut</button> 

Wenn Ihnen die Darstellung nicht gefällt, wenden Sie CSS an, um es so zu gestalten, wie Sie es möchten.

button { 
 
    text-decoration: underline; 
 
    color: blue; 
 
    background: none; 
 
    border: none; 
 
    padding: 0; 
 
    display: inline; 
 
}
<button>LogOut</button>

0

Wenn Sie ein Klick-Ereignis direkt an ein HTML-Element binden wollen, dann sollten Sie eine Standardmethode wie folgt verwenden:

<html> 
    <head> 
    </head> 
    <body> 
    <form id="LogOut-form" type="submit"></form> 
    <a href="#" onClick="buttonClicked(event)">LogOut</a> 
    </body> 
    <script> 
    function buttonClicked(event){ 
     event.preventDefault(); 
     document.getElementById('LogOut-form').submit(); 
    } 
    </script> 
</html> 

Hier ButtonClicked() ist eine Funktion, die bei jedem Klick ausgelöst wird.