Try this
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
var buttonId = 0;
var classId = 0;
var visitedbuttons = [];
var lastbutton;
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"];
function keyFunction(event) {
event.target.style.backgroundColor = "#D3D578";
event.target.style.backgroundColor = colors[Math.floor(Math.random() * 3) + 1];
for (var i = 0; i < visitedbuttons.length; i++) {
visitedbuttons[i].style.backgroundColor = 'brown';
}
if (lastbutton != null)
lastbutton.style.backgroundColor = 'yellow';
lastbutton = event.target;
visitedbuttons.push(lastbutton);
}
}
</script>
</head>
<body>
</body>
</html>