Can I call different effects from multiple buttons generated using a single createElement? (in Javascript)

I'd like to generate a number of buttons using createElement, but I'm having trouble making the buttons do different things when they're clicked. In this example, I would like one button to make the console read "punch 10", and one to make the console read "kick 20".

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var joe = {
    age: 20,
    moves: [
        {name: "punch", power: 10,},
        {name: "kick", power: 20,},
    ]
}

function printBtn() {
  for (var i = 0; i < joe.moves.length; i++) {
    let btn = document.createElement("button");
    var n = document.createTextNode(joe.moves[i].name);
    var t = document.createTextNode(joe.moves[i].power);
    var nr = joe.moves[i].name
    var tr = joe.moves[i].power
    var linebreak = document.createElement("br")
    btn.appendChild(n);
    btn.appendChild(linebreak);
    btn.appendChild(t);
    document.body.appendChild(btn);
    btn.style.width = "125px"
    btn.style.height = "50px"
    btn.style.fontSize = "12px"

    btn.innerHTML.onclick = function readOut() {
      console.log(nr + " " + tr)
    }
  }
}

<!-- language: lang-html -->

<button onclick="printBtn();">Go Joe!</button>

<!-- end snippet -->

I tried to use innerHTML to assign each button a function, containing variables which I thought would be different for each of the buttons, to make the console.log method say "punch 10" or "kick 20" depending on which button was clicked. However, as the variables change, the outcome does too, which results in my console.log method always resulting in "kick 20".

I would just make the buttons you need in html and give the css "visibility: hidden" on those buttons and use the printBtn function to make those styles visable with document.getElementById("btn").style.visibility = visable.

I would comment this but I can't yet.

This code achieves exactly what you requested:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const joe = {
    age: 20,
    moves: [
        {name: "punch", power: 10,},
        {name: "kick", power: 20,},
    ]
}

function printBtn() {
  for (let i = 0; i < joe.moves.length; i++) {
    (function(i) {
      const btn = document.createElement("button");
      const n = document.createTextNode(joe.moves[i].name);
      const t = document.createTextNode(joe.moves[i].power);
      const nr = joe.moves[i].name
      const tr = joe.moves[i].power
      const linebreak = document.createElement("br")
      btn.appendChild(n);
      btn.appendChild(linebreak);
      btn.appendChild(t);
      document.body.appendChild(btn);
      btn.style.width = "125px";
      btn.style.height = "50px";
      btn.style.fontSize = "12px";

      btn.onclick = () => {
        console.log(nr + " " + tr);
      }
    })(i);
  }
}

<!-- language: lang-html -->

<button onclick="printBtn();">Go Joe!</button>

<!-- end snippet -->

However you need to note 2 important things:

1) First btn.innerHTML.onclick is wrong. You call the method onclick on a DOM Element (like btn) and not on btn.innerHTML

2) Second, you might have wonder what is this:

(function(i) {
  // ...
})(i)

Since we're assigning multiple event listeners (click) inside a for-loop, you'll have to create a temporary scope to preserve the value of the variables (especially nr and tr).You can leave it for now and don't touch it since this is one of the difficult aspects of JS.

Regards