Wie man Onclick Funktion von Javascript hinzufügen?

Question

Ich möchte eine Schaltfläche erstellen und eine onclick-Funktion zu dieser Schaltfläche mit Javascript hinzufügen, aber es gibt ein Problem mit onclick-Funktion. Wenn ich den Button unter dem folgenden Code hinzufüge, kann ich in Chrome keine Anführungszeichen sehen. Wie kann ich eine Onclick-Funktion mit Argumenten hinzufügen?

myButton+= "<button onclick='addNewproperty('" + property + "','" + entry + "')' class='btn grey btn-circle' style='font-size: x-small; float: left'><i class='fa fa-times'></i>"; 
myButton+= entry.length > 12 ? entry.substring(0,12) + "..." : entry; 
myButton+= "</button>" 

Answer 1

Sie können Zitate streichen. Da Sie die gleiche Art von Anführungszeichen wie Wrapper und innere Anführungszeichen verwenden, verhält es sich tatsächlich wie <button onclick="addNewproperty(".

myButton+= "<button onclick=\"addNewproperty('" + property + "','" + entry + "')\" class='btn grey btn-circle' style='font-size: x-small; float: left'><i class='fa fa-times'></i>"; 
myButton+= entry.length > 12 ? entry.substring(0,12) + "..." : entry; 
myButton+= "</button>"; 

Answer 2

Sie können auch Backticks ` verwenden, um Ihre Variablen zu wickeln.

var hello = "Hello"; 
 
var myButton = ""; 
 
myButton+= "<button onclick='alert(`" + hello + "`)' class='btn grey btn-circle' style='font-size: x-small; float: left'><i class='fa fa-times'></i>"; 
 
myButton+= "</button>" 
 

 
document.getElementById("div").innerHTML = myButton

<div id="div"> 
 

 
</div>

Answer 3

basierend auf this Antwort und meine Selbsterfahrung manchmal shoud Sie onClick statt Onclick verwenden.

Answer 4

Zur einfacheren Ansatz, können Sie eine id auf Ihre Schaltfläche Element hinzufügen, zum Beispiel:

myButton += "<button id='someId'>" 

Dann können Sie onClick oder alle Ereignisse zu Ihrem Element durch hinzufügen:

document.getElementById("someId").addEventListener('click', function(){ 
    alert("Button clicked") 
})