I am attempting to make a color picker where the button or color options are SVG elements, and when clicked, they change the fill color of another SVG. I'm not too sure why the code isn't working. I made sure to target the correct class, and as well made sure the class was in the section of the SVG that contains the fill style... I don't know why my code is wonky in Stack but here is a link to my CodePen https://codepen.io/maddylobb/pen/oNormML Any and all help is appreciated!
var colorArray = ["#8ecae6", "#219ebc", "#023047", "#ffb703", "#fb8500"];
var colorButtons = document.querySelectorAll(".colors-svg");
var content = document.querySelector(".colors-svg-main");
function buidPickerOptions() {
colorButtons.forEach((button, i) => {
// set the fill color of each button
button.style.fill = colorArray[i];
button.addEventListener("click", () => {
// set the fill color from the button that is clicked
content.style.fill = colorArray[i];
})
});
}#content {
background-color: #219ebc;
height: 100vh;
//position: relative;
width: 100vw;
#color-change-element {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
#s-7 {
max-height: 400px;
}
}
#select-container {
background-color: #fff;
left: 0;
overflow: hidden;
padding: 20px;
position: fixed;
top: 40%;
width: 200px;
#select-bottom {
height: 40px;
ul {
background-color: #fff;
display: flex;
height: 100%;
justify-content: space-between;
width: 100%;
li {
list-style: none;
cursor: pointer;
height: 30px;
margin-bottom: 10px;
width: 30px;
}
}
#colors {
height: 100%;
left: 0;
top: 0;
width: 100%;
}
}
}
}<section id="content">
<div id="color-change-element">
<svg id="s-7" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 76">
<g clip-path="url(#clip0_187_4)">
<path d="M0 0h79v76H0z"/>
<path class="color-svg-main" d="M40.39 5.987c.645-1.918 1.278-4.159 3.167-4.975a3.71 3.71 0 0 1 2.89.018c.845.418 1.8 1.419 2.295 4.77.496 3.352.047 6.078-.36 8.676-1.678 10.564-1.119 12.164-.25 13.096.49.522 1.16 1.357 4.56 1.32 7.11-.078 14.25 1.14 21.322.391a3.696 3.696 0 0 1 2.35.424 4.248 4.248 0 0 1 1.443 1.713c.319.69.445 1.45.367 2.206-.305 2.303-3.064 3.59-6.266 5.045a38.866 38.866 0 0 1-8.528 2.64c-2.73.468-5.947.675-8.55 1.622-1.034.336-1.871 1.119-2.505 1.999-.364.541-.533 1.798-.557 3.575-.032 2.539.717 3.547 2.162 8.091.469 1.855.568 2.238.966 3.498.49 1.45 1.023 2.798 1.738 4.151a22.785 22.785 0 0 1 2.142 8.493 2.313 2.313 0 0 1-.51 1.756c-.823.8-2.435.328-2.987.169-4.2-1.22-8.15-9.012-14.983-16.397-1.464-1.58-3.44-3.547-6.181-3.707-1.431-.082-2.736.34-4.638 1.43-5.449 3.104-8.213 7.284-13.99 11.734-.727.556-2.34 1.76-4.334 1.582-.19.004-2.289-.228-2.925-1.597-.724-1.551.767-3.653 1.682-4.942 7.65-10.806 9.189-13.277 10.174-16.288.717-2.173 1.622-5.08.46-7.999-.609-1.515-1.664-2.76-5.742-5.41-8.222-5.343-12.67-5.967-13.247-9.28a3.786 3.786 0 0 1 .94-3.339c1.344-1.204 3.545-.333 9.09 1.46 4.312 1.394 8.59 2.675 13.465 3.017a8.332 8.332 0 0 0 4.749-.741c1.892-.982 2.774-2.6 3.803-4.527 3.985-7.494 5.98-11.25 6.788-13.674Z" fill="#F366CC" stroke="#fff" stroke-width="2" stroke-miterlimit="10"/>
</g>
<defs>
<clipPath id="clip0_187_4">
<path fill="#fff" d="M0 0h79v76H0z"/>
</clipPath>
</defs>
</svg>
</div>
<div id="select-container">
<section id="select-top">
<h1>Select One:</h1>
<!-- <div>
<button class="selected">Colors</button>
</div> -->
</section>
<div id="select-bottom">
<section id="colors">
<ul>
<li><svg id="s-7" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 76">
<g clip-path="url(#clip0_187_4)">
<path d="M0 0h79v76H0z"/>
<path class="color-svg" d="M40.39 5.987c.645-1.918 1.278-4.159 3.167-4.975a3.71 3.71 0 0 1 2.89.018c.845.418 1.8 1.419 2.295 4.77.496 3.352.047 6.078-.36 8.676-1.678 10.564-1.119 12.164-.25 13.096.49.522 1.16 1.357 4.56 1.32 7.11-.078 14.25 1.14 21.322.391a3.696 3.696 0 0 1 2.35.424 4.248 4.248 0 0 1 1.443 1.713c.319.69.445 1.45.367 2.206-.305 2.303-3.064 3.59-6.266 5.045a38.866 38.866 0 0 1-8.528 2.64c-2.73.468-5.947.675-8.55 1.622-1.034.336-1.871 1.119-2.505 1.999-.364.541-.533 1.798-.557 3.575-.032 2.539.717 3.547 2.162 8.091.469 1.855.568 2.238.966 3.498.49 1.45 1.023 2.798 1.738 4.151a22.785 22.785 0 0 1 2.142 8.493 2.313 2.313 0 0 1-.51 1.756c-.823.8-2.435.328-2.987.169-4.2-1.22-8.15-9.012-14.983-16.397-1.464-1.58-3.44-3.547-6.181-3.707-1.431-.082-2.736.34-4.638 1.43-5.449 3.104-8.213 7.284-13.99 11.734-.727.556-2.34 1.76-4.334 1.582-.19.004-2.289-.228-2.925-1.597-.724-1.551.767-3.653 1.682-4.942 7.65-10.806 9.189-13.277 10.174-16.288.717-2.173 1.622-5.08.46-7.999-.609-1.515-1.664-2.76-5.742-5.41-8.222-5.343-12.67-5.967-13.247-9.28a3.786 3.786 0 0 1 .94-3.339c1.344-1.204 3.545-.333 9.09 1.46 4.312 1.394 8.59 2.675 13.465 3.017a8.332 8.332 0 0 0 4.749-.741c1.892-.982 2.774-2.6 3.803-4.527 3.985-7.494 5.98-11.25 6.788-13.674Z" fill="#F366CC" stroke="#fff" stroke-width="2" stroke-miterlimit="10"/>
</g>
<defs>
<clipPath id="clip0_187_4">
<path fill="#fff" d="M0 0h79v76H0z"/>
</clipPath>
</defs>
</svg></li>
<li><svg id="s-7" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 76">
<g clip-path="url(#clip0_187_4)">
<path d="M0 0h79v76H0z"/>
<path class="color-svg" d="M40.39 5.987c.645-1.918 1.278-4.159 3.167-4.975a3.71 3.71 0 0 1 2.89.018c.845.418 1.8 1.419 2.295 4.77.496 3.352.047 6.078-.36 8.676-1.678 10.564-1.119 12.164-.25 13.096.49.522 1.16 1.357 4.56 1.32 7.11-.078 14.25 1.14 21.322.391a3.696 3.696 0 0 1 2.35.424 4.248 4.248 0 0 1 1.443 1.713c.319.69.445 1.45.367 2.206-.305 2.303-3.064 3.59-6.266 5.045a38.866 38.866 0 0 1-8.528 2.64c-2.73.468-5.947.675-8.55 1.622-1.034.336-1.871 1.119-2.505 1.999-.364.541-.533 1.798-.557 3.575-.032 2.539.717 3.547 2.162 8.091.469 1.855.568 2.238.966 3.498.49 1.45 1.023 2.798 1.738 4.151a22.785 22.785 0 0 1 2.142 8.493 2.313 2.313 0 0 1-.51 1.756c-.823.8-2.435.328-2.987.169-4.2-1.22-8.15-9.012-14.983-16.397-1.464-1.58-3.44-3.547-6.181-3.707-1.431-.082-2.736.34-4.638 1.43-5.449 3.104-8.213 7.284-13.99 11.734-.727.556-2.34 1.76-4.334 1.582-.19.004-2.289-.228-2.925-1.597-.724-1.551.767-3.653 1.682-4.942 7.65-10.806 9.189-13.277 10.174-16.288.717-2.173 1.622-5.08.46-7.999-.609-1.515-1.664-2.76-5.742-5.41-8.222-5.343-12.67-5.967-13.247-9.28a3.786 3.786 0 0 1 .94-3.339c1.344-1.204 3.545-.333 9.09 1.46 4.312 1.394 8.59 2.675 13.465 3.017a8.332 8.332 0 0 0 4.749-.741c1.892-.982 2.774-2.6 3.803-4.527 3.985-7.494 5.98-11.25 6.788-13.674Z" fill="#000" stroke="#fff" stroke-width="2" stroke-miterlimit="10"/>
</g>
<defs>
<clipPath id="clip0_187_4">
<path fill="#fff" d="M0 0h79v76H0z"/>
</clipPath>
</defs>
</svg></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</div>
</div>
</section>var colorArray = ["#8ecae6","#219ebc","#023047","#ffb703","#fb8500"];
var colorButtons = document.querySelectorAll(".color-svg"); // edited colors to color
var content = document.querySelector(".color-svg-main"); // same here
function buidPickerOptions(){
colorButtons.forEach((button,i) => {
// set the fill color of each button
button.style.fill = colorArray[i];
button.addEventListener("click", () =>{
// set the fill color from the button that is clicked
content.style.fill = colorArray[i];
})
});
}
buidPickerOptions() // you should call the function