Question

我已经制作了24个带有for循环的按钮，并希望从1到24的按钮给出这样的信息。

＆＃34;你点击按钮1＆＃34; ＆＃34;你点击按钮2＆＃34;等等。

我已经分开了3个第一个按钮，所以他们说＆＃34;按钮1＆＃34; ＆＃34; 2＆＃34; ＆＃34; 3＆＃34;，但这是由3 if语句完成的，这意味着我需要23-24 ish if语句才能让他们按我的意愿去做。这不是一种非常有效的方式。

在＆＃34; knapp＆＃34;之后，是否有一种方法可以让按钮ID添加+1每次循环运行？像这样的元素.id =＆＃34; knapp＆＃34; + 1; ＆LT;因此，当循环保持运行24次时，id变为knapp1，knapp2，knapp3？

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;

Answer 1

您可以将ID保存在<div />元素的dataset中。

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>

Answer 2

在没有任何建议的情况下直接回答您的问题：

你已经在for循环（antall）中有一个计数器。您可以使用该变量并将其连接到您用作id的字符串的末尾。

element.id = "knapp" + antall;

获得24个按钮的不同ID，使用for循环

2 个答案: