forループで作られた24個のボタンのidを異ならせる

forループで24個のボタンを作って、番号1から24までのボタンにこのようなメッセージを与えたい。forループで作られた24個のボタンのidを異ならせる

"ボタン1をクリックしました。" "ボタン2をクリックしたように続きます。

「ボタン1」「2」「3」と言うように3つの最初のボタンを分割することができましたが、これは3つのif文で実行されます。つまり、23-24 ish if文が必要です彼らはすべて私が望むようにする。これは非常に効率的な方法ではありません。

ループが実行されるたびにボタンIDに「knapp」の後に+1を追加する良い方法はありますか？このようなものelement.id = "knapp" + 1; <したがってidは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;

出典

2016-10-14 Zuflus

あなたは<div />要素のdatasetにIDを保存することができます。直接の提案せずにあなたの質問に答えるために

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>

出典

2016-10-14 14:13:51 Andreas

：

あなたは既にforループ（antall）でカウンターを持っています。その変数を使用して、idとして使用している文字列の末尾に連結することができます。

element.id = "knapp" + antall;

出典

2016-10-14 14:14:16 MarkBowman

ああ、天才x）私の目の前に。 – Zuflus

私たちの最高のことが起こります！ – MarkBowman

forループで作られた24個のボタンのidを異ならせる

答えて

関連する問題