I wrote this code to change the color of html. when the mouse goes down the color is brighter and when the mouse goes back up the color is supposed to change back to its other color, but I’m having trouble getting this mouseup eventListener to work. here is the code I wrote to do this
const colors = [
new Map([[green, "lime"], [yellow, "#FF6"], [blue, "dodgerblue"], [red, "salmon"]]),
new Map([[green, "green"], [yellow, "#CC0"], [red, "red"], [blue, "blue"]])
];
simonHTML.colors = document.getElementsByClassName('color');
function playerMove(e){
e.target.style.backgroundColor = colors[0].get(e.target);
e.target.addEventListener('mouseup', function(){
e.target.style.backgroudColor = colors[1].get(e.target);
})
return game.playerMoves.push(e.target);
}
for (let i = 0; i < simonHTML.colors.length; i++){
simonHTML.colors[i].addEventListener('mousedown', playerMove);
}
the mousedown function is working and its changing the colors, but my mouseup function is not working and its showing no errors in the console either so I’m not sure why its not working. I would appreciate any help with this.
here is a link to all the code for this project- https://codepen.io/icewizard/pen/JLBpNQ