CODEWITHSUNDEEP
javascripthtml
Rodrigo Miranda
Rodrigo Miranda

Reputation: 123

onclick excecutes does not work, only when creating DOM

I have the following HTML and javascript. I can create the buttons without any problem, but the onclick function does not work when clicking the button. It does not do anything.

If I put the method without the ' it excecutes when generating the form, one after the other generating 3 dialogs

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>

Upvotes: 0

Views: 44

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370759

The problem is:

btn.onClick = 'buttonClicked()';

It looks like you were trying to assign to the onclick attribute of the HTML, in which case the proper syntax would be

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

But since you already have a reference to the element, there's no need to resort to attributes; inline handlers are pretty bad practice anyway. Change to:

btn.onclick = buttonClicked;

(note the lower-case c in onclick), or

btn.addEventListener('click', buttonClicked);

Also, you might consider simply assigning to the button's textContent rather than creating a text node explicitly, it's a bit easier to read and write: change

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

to

btn.textContent = array[i];

Upvotes: 1

Related Questions