Why does click work but hover doesn't?
Here's the code I'm having an issue with
one.addEventListener('click', () => {
if (one.hasAttribute('checked')) {
one.style.backgroundColor = 'green'
two.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
three.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
four.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
five.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
}
})
one.addEventListener('mouseenter', () => {
one.style.backgroundColor = 'green'
two.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
three.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
four.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
five.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
})
one.addEventListener('mouseleave', () => {
one.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
two.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
three.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
four.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
five.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
})
one.addEventListener('click', () => {
if (one.hasAttribute('checked')) {
one.style.backgroundColor = 'green'
two.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
three.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
four.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
five.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
}
})
one.addEventListener('mouseenter', () => {
one.style.backgroundColor = 'green'
two.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
three.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
four.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
five.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
})
one.addEventListener('mouseleave', () => {
one.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
two.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
three.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
four.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
five.style.backgroundColor = 'rgba(211, 211, 211, 0.9)'
})
