How to programmatically create separate permutations of the same function?

Question

I'm attempting to create onclick events for a list of items that will basically achieve the same affect from a different sources of information that depends on the list item selected.

function buttonOnclick(whichButton) {
    document.getElementById("dialog0").innerHTML = document.getElementById("dialog" + whichButton.toString());
}

document.getElementById("button1").onclick = function breakerOnclick1() {
    buttonOnclick(1);
}

document.getElementById("button2").onclick = function breakerOnclick2() {
    buttonOnclick(2);
}

document.getElementById("button3").onclick = function breakerOnclick3() {
    buttonOnclick(3);
}

document.getElementById("button4").onclick = function breakerOnclick4() {
    buttonOnclick(4);
}

document.getElementById("button5").onclick = function breakerOnclick5() {
    buttonOnclick(5);
}

I would like to achieve this affect with a for loop instead of so manually. I know there is probably a more object oriented oriented or simple approach I'm missing being green to JavaScript.

How can this affect be achieved more programmatically?

Solution: Just to be clear on the answer to this question. The following produces the correct results quickly and reliably. All though, I'm sure there are other relevant suggestions below.

for (var i = 1; i < NUM_ENTRIES; i++){
    document.getElementById("button" + i).onclick = function(){
        var replacement = document.getElementById("dialog" + this.id[this.id.length-1]).innerHTML;
        document.getElementById("dialog0").innerHTML = replacement;
    }
}

Answer 1

Well, first off, assigning a DOM element to another element's innerHTML is just going to produce "[object HTMLDivElement]" or similar depending on the element. Perhaps you want

function buttonOnclick(whichButton) {
 document.getElementById("dialog0").innerHTML = document.getElementById("dialog" + whichButton.toString()).outerHTML;
 //which would make the innerHTML be `<div>stuff</div>`
}

As for your other issue, just use a query, iterate to assign, and pass the button's id number along

var buttons = document.querySelectorAll("[id^=button]");
for(var i = 0; i < buttons.length; i++){
 buttons[i].onclick = function(){
  buttonOnclick(this.id[this.id.length-1]);
 };
}

Answer 2

With a for loop?

function buttonOnclick(whichButton) {
    document.getElementById("dialog0").innerHTML =  document.getElementById("dialog" + whichButton).innerHTML;
}
for (var i = 1; i < 6; i++) {
    document.getElementById("button" + i).onclick = function (n) {
        return function () {
            buttonOnclick(n);
        }
    }(i);
}

Selected: <strong><span id="dialog0"></span></strong><br>
<button id="button1">1</button> <span id="dialog1">abc</span><br>
<button id="button2">2</button> <span id="dialog2">def</span><br>
<button id="button3">3</button> <span id="dialog3">ghi</span><br>
<button id="button4">4</button> <span id="dialog4">jkl</span><br>
<button id="button5">5</button> <span id="dialog5">mno</span>   

Answer 3

This will give you want you're looking for.

function doSomething(id) {
    document.getElementById("dialog0").innerHTML = id;
}

for (let i = 0; i < 5; i++) {
    document.getElementById('button' + i).onclick = function(){
        doSomething(i);
    });
}

Answer 4

to beginn you don't need to name your Anonymous function

then you could use a simple for loop?

for(var i=0;i<=5;i++){
  document.getElementById("button"+i).onclick = (function(i) {
     return function(){
       buttonOnclick(i);
     })(i); //saving i for later
}

the best solution would be to do something like this

<button data-id="1" class="bar">
<button data-id="2" class="bar">
                 ....

and add a event listener to getElementsByClassName("bar"), and read the data-id attribute.

Answer 5

Instead of hard-coding the button number in the function, get it from the element.

for var i = 1; i < 6; i++) {
    document.getElementById("button" + i).addEventListener("click", function () {
        var buttonNum = this.id.replace('button', '');
        buttonOnClick(buttonNum);
    }
}

Answer 6

A simple call to forEach can be used to iterate through the buttons.

[].forEach.call(document.getElementsByClassName('dialog-button'), function (el) {
  el.onclick = function () {
    document.getElementById("dialog0").innerHTML = document.getElementById(el.id.replace('button', 'dialog')).innerHTML;
  }
});

div {
  border: 1px dashed blue;
  margin: 10px;
  display: inline-block;
  width: 20px;
}

<div id="dialog0"></div>
<div id="dialog1">1</div>
<div id="dialog2">2</div>
<div id="dialog3">3</div>
<div id="dialog4">4</div>
<div id="dialog5">5</div>

<br />

<button id="button1" class="dialog-button">1</button>
<button id="button2" class="dialog-button">2</button>
<button id="button3" class="dialog-button">3</button>
<button id="button4" class="dialog-button">4</button>
<button id="button5" class="dialog-button">5</button>