Getting different id for 24 buttons, made with a for loop

Question

I have made 24 buttons with a for loop, and want button from number 1 to 24 to give a message like this.

"you clicked on button 1" "you clicked on button 2" and so on.

I have been able to split the 3 first buttons so they say "button 1" "2" "3", but that is done by 3 if statements, which means i would need 23-24 ish if statements to get them all to do as I want. That's not a very efficient way to do it.

Is there a good way to get the button id to add +1 after "knapp" every time the loop runs ? something like this element.id = "knapp" + 1; < so the id become knapp1, knapp2, knapp3 as the loop keep running 24 times ?

html:

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="Assignment06.js"></script>

<style>

    h1 {
        text-align: center;
    }

    div {

        background-color: forestgreen;
        border: solid 1px #000;
        display: inline-block;
        width: 100px;
        height: 100px;
        padding: 10px
    }

    #panel {

        width: 610px;
        margin: 0 auto;
    }

</style>
</head>
<body>
    <h1>Assignment06</h1>

    <p id = "panel"></p> 


</body>
</html>

Javascript:

function dag(){

    knapp = window.alert("Du trykket knapp 1");

}

function dag2(){

    window.alert("Du trykket knapp 2");

}

function dag3(){

    window.alert("Du trykket knapp 3");

}

function init(){

    knapper();
}

function knapper(){

    for (var antall = 1; antall <= 24; antall++){

        if(antall == 1){
            var element = document.createElement("div");
            element.innerHTML = antall;
            element.id = "knapp";

            knapp = element.addEventListener("click", dag);
            element.type = "div";
            var panel = document.getElementById("panel");
            panel.appendChild(element);
        }

        else if (antall == 2){
            var element = document.createElement("div");
            element.innerHTML = antall;
            element.id = "knapp2";

            knapp2 = element.addEventListener("click", dag2);
            element.type = "div";
            var panel = document.getElementById("panel");
            panel.appendChild(element);
        }

        else{

            var element = document.createElement("div");
                element.innerHTML = antall;
                element.id = "knapp3";

                knapp3 = element.addEventListener("click", dag3);
                element.type = "div";
                var panel = document.getElementById("panel");
                panel.appendChild(element);
        }
    }
}

window.onload = init;

score 0 · Answer 1 · answered Oct 14 '16 at 14:13

You can save the id in the dataset of the <div /> element.

function knapper() {
  var panel = document.getElementById("panel");

  for (var antall = 1; antall <= 10; antall++) {
    var element = document.createElement("div");
    element.innerHTML = antall;
    element.dataset.id = antall;
    element.addEventListener("click", dag);

    panel.appendChild(element);
  }
}

function dag(evt) {
  alert(evt.target.dataset.id);
}

window.onload = knapper;

#panel div {
  width: 50px;
  height: 50px;
  border: solid 1px black;
  float: left;
}

<div id="panel"></div>

score 0 · Answer 2 · answered Oct 14 '16 at 14:14

0

To directly answer your question without suggestions:

You already have a counter in the for loop (antall). You can just use that variable and concatenate it on the end of the string that you're using as an id.

element.id = "knapp" + antall;

answered Oct 14 '16 at 14:14

MarkBowman

61
6

Happens to the best of us! – MarkBowman Oct 14 '16 at 15:36

Getting different id for 24 buttons, made with a for loop

2 Answers2