My goal is to create functionality where the user can change the background color by clicking on the background of the div, and change text color by clicking on the text within the div.
var box1 = document.querySelectorAll('.color1');
var picker = document.getElementById('colorpicker');
setInterval(() => {
let color = picker.value;
for (let i = 0; i < 2; i++) {
box1[i].style.backgroundColor = color;
}
}, 200);div{
height: 200px;
width: 20%;
margin-top:10px;
}<input id = "colorpicker" type = "color" value = "#ffffff">
<div class = "color1" contenteditable = 'true'> color changes </div>
<div class= "color1"id = "c" contenteditable = 'true'> how are you </div>