Mouseup event listener is not working no errors in console

Mouseup event listener is not working no errors in console
0.0 0

#1

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


#2

Is that correct?

Your mouseup event listener is INSIDE your function playerMove() ?


#3

yes, I put it there because I think it looks cleaner and I don’t have to make another for loop. I still can’t figure out why its not working though since its the same code as the mousedown function.


#4

Why don’t you try putting it in the same loop…

for (let i = 0; i < simonHTML.colors.length; i++){
  simonHTML.colors[i].addEventListener('mousedown', playerMove);
  simonHTML.colors[i].addEventListener('mouseup', function(){alert('mouseup!') });
}
 

#5

didn’t think of that. thanks