Aufruf einer Alarmfunktion über eine Schaltfläche, aber ohne Onclick

Was ich versuche zu tun, ist, meine Funktion aufzurufen, sobald jemand auf meine Schaltfläche klickt. Aber ich weiß, dass es mitAufruf einer Alarmfunktion über eine Schaltfläche, aber ohne Onclick

<button onclick="myFuntion()>

getan werden kann, aber ich möchte diesen Schritt überspringen, ich habe nicht eine Funktion in meinem Knopf will, ich habe, dass seine schlechte Programmierung gehört.

Allerdings, wie meine Datei aussieht.

<!DOCTYPE html> 
<html> 

<head> 
<meta charset="UTF-8"> 
<script type="text/javacript" src="javascript.js"> </script> 
<title> Javascript </title> 

<script> 

function testFunction(){ 
document.getElementById("test").onclick = Hello; 
} 
function Hello(){ 
    alert("Hello"); 
} 
</script> 
</head> 

<body> 
<button type="button" id="test" <!-- I know i can use onclick="testFunction()" here but i dont wanna !-->> Click me </button> 

</body> 

</html>

Wie kommt es tut Pop-up mit der Box „Hallo“, wenn ich auf den Knopf drücken, was ich falsch gemacht habe?

Quelle

2016-09-23 phil_sw

Sie wollen also nicht die Funktion auf dem Click-Ereignis befestigen, und Sie fragen, warum es die Funktion nicht ausgeführt, wenn Sie darauf klicken ? Das ist das Click-Ereignis * für *. Es ist nicht wirklich klar, was das Problem hier ist. – David

Nun, Sie rufen nie testFunction irgendwo auf, so dass das Klickereignis nicht zur Schaltfläche hinzugefügt wird. – epascarello

Die Frage ist: Warum nicht onclick verwenden, das dafür entworfen ist? – andreaem

Sie müssen Ihre testFunction aufrufen, nachdem der HTML-Text geladen wurde, so dass es tatsächlich die Bindung erstellt.

, dass am Ende der Datei ist, dann würden Sie so etwas wie tun:

... 
<script> 
    testFunction() 
</script> 
</body> 
...

Wenn Sie ausführen, dass in Ihrem head Skript Bindungscode das button Element wird noch nicht — existieren, die ist warum muss das am Ende sein?

JavaScript-Bibliotheken wie jQuery machen dies eleganter, indem sie einen ready Hook bereitstellen, wo man den Code aufruft, sobald die Seite vollständig geladen ist, ohne auf Code unten auf der Seite zurückgreifen zu müssen.

Komplettes Beispiel mit script am Ende (verwirrenderweise, Stack Snippets zeigen es Ihnen nicht in der Reihenfolge, die sie tatsächlich im Schnipsel sind; obwohl es nicht so aussieht, ist das Skript hier am Ende):

// Scoping function to avoid creating unnecessary globals 
 
(function() { 
 
    // The click handler 
 
    function Hello() { 
 
    alert("Hello"); 
 
    } 
 

 
    // Hooking it up -- you *can* do it like you did: 
 
    //document.getElementById("test").onclick = Hello; 
 
    // ...but the modern way is to use addEventListener, 
 
    // which allows for more than one handler: 
 
    document.getElementById("test").addEventListener(
 
    "click", Hello, false 
 
); 
 
})();

<button type="button" id="test">Click me</button>

Quelle

2016-09-23 16:00:17 jsbueno

Oder in der Tat, bewegen Sie den gesamten Skript-Code zu diesem 'Skript'-Element am Ende. –

Hmmm .. .Okay, ich verstehe. Aber ich habe auch versucht mit window.onload = Hallo; Das hat nicht funktioniert. Der einzige Weg, wie du es tun kannst, ist, die Funktion am unteren Rand des Körpers aufzurufen. –

'window.onload = Hello;' <- das ruft die Alert-Funktion auf, nicht die, die das Click-Event bindet. – epascarello

-1

einfach die Zeile in Ihrer testFunction immer laufen. Wie hier zu sehen: https://jsfiddle.net/arugco4b/

Quelle

2016-09-23 16:02:15 Maettel

window.onload=testFunction; 
 
function testFunction(){ 
 
document.getElementById("test").onclick = Hello; 
 
} 
 
function Hello(){ 
 
    alert("Hello"); 
 
}

Quelle

2016-09-23 16:17:05 jsquerylover

Sie müssen diese Funktion auf Fensterladen laden..habe getestet .. es funktioniert gut – jsquerylover

Aufruf einer Alarmfunktion über eine Schaltfläche, aber ohne Onclick

Antwort

Verwandte Themen