Unterscheiden Sie Schaltflächenfarben mit event.target.classlist

Question

Ich habe gerade die dynamischen Schaltflächen mit Farben generiert. Haben die letzte klickten Tasten und besuchte Tasten zu unterscheiden durch die Verwendung unterschiedlicher Farben mit 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

Dies ist ein erster Versuch, die Tasten unterschiedlich einzufärben, abhängig von der ID. Aber ich bin mir immer noch nicht sicher, was der Zweck dieses Skripts ist.

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:

Dies ist die CSS für eine Schaltfläche, die verschiedenen Farben auf verschiedenen Tastenzustände hat:

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>