How to dynamically change color of clicked elements using color-picker

Question

I wanted to change color according to user preference dynamically like when a user selects a color then it is applied synchronously to the element .

Like when an element is clicked color picker opens and then it works like developer tools color-picker , when a color is chosen from the picker it is applied to element and if user wants to change the color again in same picker than that also applied

Tried to went through following questions but couldn't find answer :

Change background colors dynamically using input event

how to dynamically select a color from a color picker by using jQuery?

HTML Input Color Picker, Apply Changes In Sync With Color Picker Selection

I wanted to code work like this in below snippet, whichever element is clicked than colors are changes of that element.

In original code html is like this : <div id="clockOuterCircle"><div id="clockStyleCircle"></div></div> which can be solved by bubbling/capturing

var reed = document.getElementById("clockOuterCircle");
var reed1 = document.getElementById("clockStyleCircle");
reed.addEventListener('click', deed)
reed1.addEventListener('click', deed)

function deed() {
  var reed2 = document.getElementById("colorClock");
  reed2.click();
  var reed3 = reed2.value;
  // reed1.addEventListener('change', function() {
  this.style.backgroundColor = reed3;
  document.getElementById("demo").innerHTML = reed3;
  //})
}

#clockStyleCircle {
  position: absolute;
  width: 16vw;
  height: 16vw;
  text-align: center;
  padding: 0%;
  top: 28.5%;
  left: 28.5%;
  border-radius: 50%;
  border: 3px solid black;
  background-color: rgb(255, 233, 35);
}

#clockOuterCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

<div id="clockStyleCircle"></div>
<div id="clockOuterCircle"></div>
<div id="demo"></div>
<input type="color" name="colorClock" id="colorClock">

Possible answer of dynamically changing color can be like this in below snippet, like using
input event separately on each element.

var reed = document.getElementById("clockOuterCircle");
var reed1 = document.getElementById("clockStyleCircle");
reed.addEventListener('click', deed)
reed1.addEventListener('click', deed)

//function deed() {
//  var reed2 = document.getElementById("colorClock");
//  reed2.click();
//  var reed3 = reed2.value;
// reed1.addEventListener('change', function() {
// this.style.backgroundColor = reed3;
// document.getElementById("demo").innerHTML = reed3;
//})
//}

reed2 = document.getElementById("colorClock");
reed2.addEventListener('input', deed)

function deed() {
  var reed3 = reed2.value;
  reed.style.backgroundColor = reed3;
}

reed4 = document.getElementById("colorClock2");
reed4.addEventListener('input', deed1)

function deed1() {
  var reed5 = reed4.value;
  reed1.style.backgroundColor = reed5;
}

#clockStyleCircle {
  position: absolute;
  width: 16vw;
  height: 16vw;
  text-align: center;
  padding: 0%;
  top: 28.5%;
  left: 28.5%;
  border-radius: 50%;
  border: 3px solid black;
  background-color: rgb(255, 233, 35);
}

#clockOuterCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

<div id="clockStyleCircle"></div>
<div id="clockOuterCircle"></div>
<div id="demo"></div>
<input type="color" name="colorClock" id="colorClock">
<input type="color" name="colorClock" id="colorClock2">

But in above method color is not changing of clicked element instead a fixed element color is changed which is defined beforehand . So have to apply code to different elements separately, as there are many elements so wanted to apply both ways

Thanks for the help in advance.

Answer 1

Updated to stop bubbling with event.stopPropagation()

If I've understood you correctly, you want to launch a colour picker every time any particular element in your page is clicked which allows you to change that element's background colour.

This solution adds and then launches a colour picker when any element with the class circle is clicked, then removes it again after a colour has been selected.

The colour picker input is hidden with display:none but the dialog box is visible.

let body = document.body;
let circles = document.querySelectorAll('.circle');


circles.forEach((circle) => {

  circle.addEventListener('click', () => {
  
    let existingColourPickers = document.querySelectorAll('input.colour-picker')
    
    existingColourPickers.forEach((existingColourPicker) => {
    
      if (body.contains(existingColourPicker)) {
        body.removeChild(existingColourPicker);
      }
    
    });
        
    event.stopPropagation();
    let colourPicker = document.createElement("input");
       
    colourPicker.type = "color";
    colourPicker.className = "colour-picker";
    body.appendChild(colourPicker); 
    colourPicker.click();
    
    colourPicker.addEventListener("input", () => {
      circle.style.backgroundColor = event.target.value;
    }, false);
    
    colourPicker.addEventListener("change", () => {
      body.removeChild(colourPicker);
    }, false);
    
  });
  
});

#clockStyleCircle {
  position: absolute;
  width: 16vw;
  height: 16vw;
  text-align: center;
  padding: 0%;
  top: 28.5%;
  left: 28.5%;
  border-radius: 50%;
  border: 3px solid black;
  background-color: rgb(255, 233, 35);
  z-index:1;
}

#clockOuterCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

#another-circle {
  width:50px;
  height:50px;
  border-radius: 50%;
  border: 4px green solid;
  background-color:blue;
  position:absolute;
  top:20px;
  left:20px;
}
.colour-picker {
  display:none;
}

<body>
  <div id="clockOuterCircle" class="circle">
    <div id="clockStyleCircle" class="circle"></div>
  </div>
  <!-- another circle -->
  <div id="another-circle" class="circle"></div>
  <!-- ... -->
</body>