Блог

Главная - Вопросы по программированию - Получение другого идентификатора для 24 кнопок, выполненных с помощью цикла for

Получение другого идентификатора для 24 кнопок, выполненных с помощью цикла for

#javascript

#javascript

Вопрос:

Я создал 24 кнопки с циклом for и хочу, чтобы кнопка с номером от 1 до 24 выдавала подобное сообщение.

«вы нажали на кнопку 1», «вы нажали на кнопку 2» и так далее.

Я смог разделить 3 первые кнопки, чтобы они говорили «кнопка 1» «2» «3», но это делается с помощью 3 операторов if, что означает, что мне понадобится 23-24 оператора if, чтобы заставить их все делать так, как я хочу. Это не очень эффективный способ сделать это.

Есть ли хороший способ заставить идентификатор кнопки добавлять 1 после «knapp» при каждом запуске цикла? что-то вроде этого element.id = «knapp» 1; < таким образом, идентификатор становится knapp1, knapp2, knapp3, поскольку цикл продолжает выполняться 24 раза?

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;

Ответ №1:

Вы можете сохранить идентификатор в dataset элементе <div /> элемента.

 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>

Ответ №2:

Чтобы напрямую ответить на ваш вопрос без предложений:

У вас уже есть счетчик в цикле for (antall). Вы можете просто использовать эту переменную и объединить ее в конце строки, которую вы используете в качестве идентификатора.

 element.id = "knapp"   antall;

Комментарии:

1. Случается с лучшими из нас!

Метки: ,