Création d'un bouton dynamique avec événement de clic en JavaScript

Comment puis-je créer un bouton dynamique avec un événement de clic avec JavaScript?

J'ai essayé ceci, mais quand je clique sur le bouton d'ajout, un message d'alerte s'affiche! Ce n'est pas ce que je veux – je veux pouvoir cliquer sur le bouton qui est créé dynamiquement.

<script language="javascript"> function add(type) { //Create an input type dynamically. var element = document.createElement("input"); //Assign different attributes to the element. element.setAttribute("type", type); element.setAttribute("value", type); element.setAttribute("name", type); element.setAttribute("onclick", alert("blabla")); var foo = document.getElementById("fooBar"); //Append the element in page (in span). foo.appendChild(element); } </script> 

Wow, vous êtes proche. Modifications dans les commentaires:

 function add(type) { //Create an input type dynamically. var element = document.createElement("input"); //Assign different attributes to the element. element.type = type; element.value = type; // Really? You want the default value to be the type string? element.name = type; // And the name too? element.onclick = function() { // Note this is a function alert("blabla"); }; var foo = document.getElementById("fooBar"); //Append the element in page (in span). foo.appendChild(element); } document.getElementById("btnAdd").onclick = function() { add("text"); }; 
 <input type="button" id="btnAdd" value="Add Text Field"> <p id="fooBar">Fields:</p> 

ce:

 element.setAttribute("onclick", alert("blabla")); 

devrait être:

 element.onclick = function () { alert("blabla"); } 

Parce que vous appelez l'alerte à la place de l'alerte comme chaîne dans l'attribut

Tout d'abord, vous devez modifier cette ligne:

 element.setAttribute("onclick", alert("blabla")); 

À quelque chose comme ça:

 element.setAttribute("onclick", function() { alert("blabla"); }); 

Deuxièmement, vous pouvez avoir des problèmes de compatibilité de navigateur lors de la connexion des événements de cette façon. Vous devrez peut-être utiliser .attachEvent / .addEvent, selon le navigateur. Je n'ai pas essayé de configurer manuellement les gestionnaires d'événements pendant un certain temps, mais je me souviens de Firefox et d'IE les traiter différemment.