Adding OnClick property to array javascript

Question

I'm trying to add arrays into onclick button for my simple JavaScript calculator.

My first try was that process(text[i]); in the code but it doesn't work at all.

So, I converted the array item to string and gave to the onclick function. then it runs a strange way.

Would you let me know how I can pass to correct type?

var text = ["+", "-", "*", "/", "SQRT", "POW", "RNDM", "MAX", "MIN"];

for (var i = 0; i < text.length; i++) {
  var child = document.createElement('button');
  child.innerText = text[i];
  child.value = text[i];
  var temp = text[i].toString();   //<-- convert to make sure it is string

  child.onclick = function () {                
    process(temp);   //<-- it doesn't work properly, and it won't accept "process(text[i])???".
  }

  label1.appendChild(child);
}        

document.body.appendChild(label1);

David · Accepted Answer · 2014-11-08 13:58:11Z

1

I have to step away from my computer, but below is almost working. ops is undefined once it gets into the onclick being set. Not sure why. Hopefully somebody else can build off of this.

function process(operation) {
  alert(operation);
}

var ops = ["+", "-", "*", "/", "SQRT", "POW", "RNDM", "MAX", "MIN"];

for (var i = 0; i < ops.length; i++) {
  var child = document.createElement('button');
  child.innerText = ops[i];
  child.value = ops[i];

  (child.onclick = function() {

    process(ops[i]);
  })(i)

  // label1.appendChild(child);
  document.body.appendChild(child);
}

// document.body.appendChild(label1);

answered Nov 8, 2014 at 13:58

David

4,8815 gold badges37 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tom tom Over a year ago

I added the enclose of "function (i)" in your code as adeneo's suggestion. then it is also working fine. Thanks.

David Over a year ago

@tomtom, excellent. Can you click the check mark below the arrows on the left to indicate this answer was the solution to your question?

dfsq · Accepted Answer · 2014-11-08 13:55:09Z

0

As already well explained by @adeneo, the problem is that all onclick handlers use the same temp variable. One more way of providing a separate scope for each iteration, is to use forEach method instead of for loop:

["+", "-", "*", "/", "SQRT", "POW", "RNDM", "MAX", "MIN"].forEach(function(text) {
    var child = document.createElement('button');
    child.innerText = text;
    child.value = text;
    child.onclick = function () {
        process(text);
    }
    label1.appendChild(child);
});

Sample: http://jsfiddle.net/kq1mpm3g/

answered Nov 8, 2014 at 13:55

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

Adding OnClick property to array javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related