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 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 >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 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 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>CodePudding user response：
First, console.log() is your best friend when debugging js. If you log colorButtons you will see an empty array. Instead of document.querySelectorAll you can use document.getElementsByClassName("colors-svg"). However, you do not have a single element with the class name "colors-svg".
Second, you seem to be mistaking class names with ids. Every id should be unique, but there are multiple elements with the same ids.
You also should not nest your css properties as shown above. Unless you are using some sort of framework that allows such behavior, then you should at least separate things as follows:
#content {
background-color: #219ebc;
height: 100vh;
width: 100vw;
}
#s-7 {
max-height: 400px;
}
#color-change-element {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#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%;
Last, when adding event listeners you need to make sure that you use the correct this scope. Otherwise all buttons will behave like the last button in your loop. In order to use the correct this value you need to replace your arrow function with a regular function(event) {} syntax. I also do not think your .forEach loop is formatted correctly, but I think this is enough to work with for now.
CodePudding user response：
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