Создание динамической кнопки с событием click в JavaScript

Как создать динамическую кнопку с событием click с JavaScript?

Я пробовал это, но когда я нажимаю кнопку "Добавить", появляется предупреждающее сообщение! Это не то, что я хочу - я хочу, чтобы можно было нажимать кнопку, которая динамически создается.

<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>

Ответы

Ответ 1

Ничего себе, ты рядом. Редактирование комментариев:

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>

Ответ 2

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

должен быть:

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

Поскольку вы вызываете предупреждение, вместо этого нажмите предупреждение как строку в атрибуте

Ответ 3

Во-первых, вам нужно изменить эту строку:

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

Что-то вроде этого:

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

Во-вторых, у вас могут возникнуть проблемы с совместимостью браузера при подключении событий таким образом. Возможно, вам понадобится использовать .attachEvent/.addEvent, в зависимости от того, какой браузер. Я не пытался вручную устанавливать обработчики событий некоторое время, но я помню, как firefox и IE обрабатывали их по-разному.