After watching a tutorial on the YouTube channel Online Tutorials titled "Change Image Color Vanilla JavaScript," I am confused as to why some random colors from the click event are overlapping the image instead of just changing the color of the cat's eye. Is there a solution to this issue? Perhaps I need to use a different image that is more suitable for this specific functionality. Additionally, I find some parts of the code, especially the one I left a comment on, quite challenging to comprehend. Any assistance in understanding these aspects would be greatly appreciated. Thank you.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Change image color"</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="images/cat-2143332_1920.jpg" alt="">
<div id="bg"></div>
<script type="text/javascript">
const bg = document.getElementById('bg');
function randomColor() {
return Math.floor(Math.random() * 255);
}
// I don't understand how this section works??
bg.addEventListener('click', () => {
bg.style.backgroundColor = 'rgba(' + randomColor() + ',' + randomColor() + ',' + randomColor() + ')';
});
</script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
img{
display: block;
width: 100%;
}
#bg{
position: absolute;
top: 0;
width: 100%;
height: 100vh;
mix-blend-mode: hue;
}