Wie erstellt man dynamisch eine Submit-Schaltfläche mit einem "onclick" -Ereignis-Attribut?

Question

Ich habe Folgendes codiert, um eine dynamische Schaltfläche zum Senden zu erstellen, die beim Klicken E-Mails sendet, aber es funktioniert nicht.

function createbuttomdyanmic() 
    { 

     var button = document.createElement('input'); 
     button.setAttribute('type', 'submit'); 
     button.setAttribute('ID', 'btnSendMail'); 
     button.setAttribute('value', 'Send Mail'); 
     button.setAttribute('onclick', 'btnSendMail_Click'); 
     document.body.appendChild(button); 
     button.setAttribute("class", "btn btn-primary"); 
     $('#button').addClass('myClass'); 

    } 

Auch ich muss diesen Stil hinzufügen, aber es wird auch nicht angezeigt.

margin-left:1407px; 
    width:98px; 

Answer 1

Es gibt einige Punkte, die im Code festgelegt werden muss:

• Wir nicht festlegen Event-Handler mit setAttribute() Methode.

können Sie addEventListener() wie folgt verwenden:

button.addEventListener('click', btnSendMail_Click); 

Oder onclick wie folgt aus:

button.onclick = function(){ 
    btnSendMail_Click() 
}; 

• können Sie .classList verwenden Klasse zu einem bestimmten Element hinzuzufügen, statt mit setAttribute("class").

So:

button.classList.Add("btn", "btn-primary"); 

• Und wenn Ihr button gehört nicht zu jedem form Sie brauchen nur sonst type="button", verwenden sie nur setzen in einem form Element, da eine submit Taste wird in der Regel ein Formular einreichen.

Answer 2

Eigentlich lief der Code ziemlich gut - nur ein paar Korrekturen und Anregungen, wie folgt:

Mit einem Submit-Button bedeutet, dass es ein Element einer Form sein sollte, obwohl man es außerhalb positionieren kann das Formular mit HTML5 mit dem Attribut "form".

Das nächste Stück Code scheint irrelevant, da es die einzige Zeile von jQuery ist und sich auf ein Element mit der ID "button" bezieht und die Sendeschaltfläche eine ID von "btnSendMail" hat aus:

//$('#button').addClass('myClass'); 

Der Name der Funktion, die die dynamische Übermittlungsschaltfläche erstellt, scheint einen Tippfehler zu enthalten. Wenn Sie diese Funktion in Ihrem Code ohne Tippfehler aufrufen, wird die Funktion nicht ausgeführt. Also, bis der Name klar ist, löschte ich den Namen vollständig und verwandelte ihn in eine anonyme Funktion.

Es ist nichts falsch daran, mit setAttribute() den Wert des onclick-Ereignisattributs festzulegen. Eine andere Möglichkeit ist die Verwendung von addEventListener(); beide funktionieren in Google Chrome einwandfrei, außer dass setAttribute() der schnellere der beiden ist; siehe here. Während Übergabeschaltflächen normalerweise zum Übermitteln von Formularen verwendet werden, gibt es einige Flexibilität, solange man ein "formaction" -Attribut bereitstellt, wenn man den Browser lieber zu einer URL umleitet, sogar eine JavaScript-URL funktioniert!

Schließlich, vorausgesetzt, Sie CSS-Code ohne Angabe, welche Klasse sie gehören sollte, so habe ich die Freiheit, es in Styling für die .btn Klasse drehen. Ich änderte auch den Code, so dass der Knopf mit meinem altmodischen Monitor nicht annähernd zu sehen war. Ich habe auch etwas Farbe hinzugefügt, um den Button zum Testen hervorzuheben.

function btnSendMail_Click() { 
 
    console.log('Button clicked; email sent'); 
 
} 
 

 
(function() { 
 

 
    var button = document.createElement('input'); 
 
    button.setAttribute('type', 'submit'); 
 
    button.setAttribute('ID', 'btnSendMail'); 
 
    button.setAttribute('value', 'Send Mail'); 
 
    button.setAttribute('onclick', 'btnSendMail_Click()'); 
 
    button.setAttribute('form', 'myform'); 
 
    document.body.appendChild(button); 
 
    button.setAttribute("class", "btn btn-primary"); 
 
    button.setAttribute("formaction", "javascript: console.log('bye');") 
 
    //$('#button').addClass('myClass'); 
 

 
}());

.btn { 
 
    margin-left: 207px; 
 
    width: 98px; 
 
    height: 48px; 
 
    background: red; 
 
    color: #fff; 
 
}

<form id="myform"> 
 

 
</form>