event.target.classlistを使用してボタンの色を区別する

Question

色でダイナミックボタンを生成しました。その最後のクリックされたボタンを区別する必要がある。これはIDに応じて、異なったボタンを着色する最初の試みであるevent.target.classlist

var buttonId = 0; 
 
var classId = 0; 
 

 
function myFunction() 
 
{ 
 
    for (i = 0; i < 10; i++) 
 
    { 
 
     var btn = document.createElement("BUTTON"); 
 
     btn.style.backgroundColor = "F093F5"; 
 
     btn.setAttribute("id", "btn" + buttonId); 
 
     btn.setAttribute("class", "class" + classId); 
 
     
 
     btn.addEventListener('click', keyFunction); 
 
     btn.innerText = "click" + buttonId; 
 
     btn.innerText = "click" + classId; 
 
     console.log(btn); 
 
     document.body.appendChild(btn); 
 

 
     buttonId++; 
 
     classId++; 
 

 
    } 
 
} 
 
{ 
 
    function keyFunction(event) 
 
    { 
 
     event.target.style.backgroundColor="#D3D578"; 
 
     var elem = event.target.classlist; 
 
    } 
 
}

<button class="cl" id="1" onclick="myFunction()" onkeypress="keyFunction()">Try it</button>

Answer 1

と異なる色を使用して、ボタンを訪れました。しかし、私はこのスクリプトの目的が何であるかまだ分かりません。

var buttonId = 0; 
 
var classId = 0; 
 

 
function myFunction() { 
 

 
    for (i = 0; i < 10; i++) { 
 
     var btn = document.createElement("BUTTON"); 
 
     btn.style.backgroundColor = "F093F5"; 
 
     btn.setAttribute("id", "btn" + buttonId); 
 
     btn.setAttribute("class", "class" + classId); 
 
     
 
     btn.addEventListener('click', keyFunction); 
 
     btn.innerText = "click" + buttonId; 
 
     btn.innerText = "click" + classId; 
 
     console.log(btn); 
 
     document.body.appendChild(btn); 
 

 
     buttonId++; 
 
     classId++; 
 
    } 
 
} 
 

 
var colors = ["#ea4747", "#eaa947", "#c9ea47", "#68ea47", "#47ea88", "#47eaea", "#4788ea", "#6847ea", "#c947ea", "#ea47a9"]; 
 

 
function keyFunction(event) { 
 
    var id = event.target.id.replace("btn", "") * 1; 
 
    event.target.style.backgroundColor = colors[id % 10]; 
 
}

button { 
 
    border: none; 
 
    padding: 2px 5px; 
 
    margin: 1px; 
 
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); 
 
    background-color: #eeeeee; 
 
    border-radius: 2px; 
 
} 
 

 
button:hover { 
 
    background-color: #e2e2e2; 
 
}

<button class="cl" id="1" onclick="myFunction()" onkeypress="keyFunction()">Try it</button><br>

EDIT：

これは、異なるボタンの状態に異なる色を持っているボタンのCSSです：

button { 
 
    border: none; 
 
    padding: 2px 5px; 
 
    margin: 1px; 
 
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); 
 
    background-color: #eeeeee; 
 
    border-radius: 2px; 
 
    transition: .1s; 
 
} 
 

 
button:hover { 
 
    background-color: #77ccf7; 
 
} 
 

 
button:focus { 
 
    background-color: #ff7733; 
 
} 
 

 
button:active { 
 
    background-color: #ff3333; 
 
}

<button>Hello!</button><button>Hello!</button>