Question

我有以下HTML和javascript。我可以毫无问题地创建按钮，但是单击按钮时onclick功能不起作用。它什么也没做。

如果我将不带'的方法放在生成表单时执行，则一个接一个地生成3个对话框

function makeUL(array) {
  var list = document.createElement('ul');

  for (var i = 0; i < array.length; i++) {
    var btn = document.createElement("BUTTON");
    /*
    btn.onClick = function () {
        buttonClicked(array[i]);
    };*/

    var t = document.createTextNode(array[i]); // Create a text node
    btn.appendChild(t); // Append the text to <button>
    btn.type = "button"
    btn.onClick = 'buttonClicked()';
    list.appendChild(btn); // Append <button> to <body>
    var nextLine = document.createElement("td");
    list.appendChild(nextLine);
  }
  return list;
}
/*
function buttonClicked(buttonName){
    alert(buttonName);
}*/
function buttonClicked() {
  alert("algo");
}

self.onInit = function() {
  var boton = [];
  for (var g = 0; g < self.ctx.settings.Botones.length; g++) {
    boton[0] = self.ctx.settings.Botones[g].btnId;
    boton[1] = self.ctx.settings.Botones[g].method;
    boton[2] = self.ctx.settings.Botones[g].params;
    document.getElementById('myList').appendChild(makeUL(boton));
  }


  self.ctx.$scope.sendCommand = function() {
    var timeout = self.ctx.settings.requestTimeout;
    var rpcMethod = self.ctx.settings.method;
    var rpcParams = self.ctx.settings.params;

    var commandPromise;
    commandPromise = self.ctx.controlApi.sendTwoWayCommand(rpcMethod, rpcParams, timeout);
    commandPromise.then(
      function success(response) {
        //alert("Comando recibido exitosamente\n Respuesta:" + angular.toJson(response));
        alert("Comando recibido exitosamente");
      },
      function fail(rejection) {
        alert("ERROR AL ENVIAR COMANDO");
      }
    );
  };
};

<form name="rpcForm">
  <md-content class="md-padding" layout="column">
    <div id="myList"></div>
  </md-content>
</form>

Answer 1

问题是：

btn.onClick = 'buttonClicked()';

您似乎正在尝试分配给HTML的onclick 属性，在这种情况下，正确的语法应该是

btn.setAttribute('onclick', 'buttonClicked()');

但是，由于您已经有对该元素的引用，因此无需求助于属性。无论如何，内联处理程序都是非常糟糕的做法。更改为：

btn.onclick = buttonClicked;

（请注意c中的小写onclick）或

btn.addEventListener('click', buttonClicked);

此外，您可以考虑简单地分配给按钮的textContent而不是显式地创建文本节点，这样就更容易读写：更改

var t = document.createTextNode(array[i]); // Create a text node
btn.appendChild(t); // Append the text to <button>

到

btn.textContent = array[i];

仅在创建DOM时，onclick执行不起作用

1 个答案: