I have to show color-picker to let change the color of desired property . Everything is working fine but is there a way to show near the tag where user click the property .
Like when user click border property than picker show up near border and if user click background than it is shown near background .
Is it possible using single function or I have to have separate functions and separate
input
I have used separate color-picker to show on click :
var spanTag = document.querySelectorAll("span");
var inputTag = document.querySelectorAll("input");
for (let i = 0; i < spanTag.length; i++) {
spanTag[i].addEventListener('click', funcRun)
function funcRun() {
if (i == 0) {
inputTag[i].style.display = "block";
inputTag[i+1].style.display = "none";
} else if (i == 1) {
inputTag[i].style.display = "block";
inputTag[i-1].style.display = "none";
}
}
}input {
display: none;
}<div>
<h3>Border</h3>
<span>borderColor</span>
<input type="color" id="borderColor">
<h3>Background</h3>
<span>backgroundColor</span>
<input type="color" id="backgroundColor">
</div>Thanks for help in advance : )
I hope I didn't get your question wrong :-D
var spanTag = document.querySelectorAll("span");
var inputTag = document.querySelectorAll("input");
for (let i = 0; i < spanTag.length; i++) {
spanTag[i].addEventListener('click', funcRun)
function funcRun() {
if (i == 0) {
inputTag[i].style.display = "inline-block";
inputTag[i+1].style.display = "none";
} else if (i == 1) {
inputTag[i].style.display = "inline-block";
inputTag[i-1].style.display = "none";
}
}
}input {
display: none;
}<div>
<h3>Border</h3>
<span>borderColor</span>
<input type="color" id="borderColor">
<h3>Background</h3>
<span>backgroundColor</span>
<input type="color" id="backgroundColor">
</div>that ?
I think you are looking for element.nextElementSibling . usage :
document.querySelectorAll("span").forEach( sp =>
{
let nextEl = sp.nextElementSibling
sp.onclick =_=> nextEl.classList.toggle('noDisplay')
nextEl.onclick =_=> nextEl.classList.add('noDisplay')
nextEl.onchange =_=> sp.style.setProperty('--myColor', nextEl.value)
})input {
display: inline-block;
}
.noDisplay {
display: none;
}
span {
--myColor : black;
cursor : pointer;
border-bottom : 3px solid var(--myColor)
}<div>
<h3>Border</h3>
<span>borderColor</span>
<input type="color" id="borderColor" class="noDisplay">
<h3>Background</h3>
<span>backgroundColor</span>
<input type="color" id="backgroundColor" class="noDisplay">
</div>Another solution with moving <input type="color"> near the <span>
but it is without guarantees, and there are still problems here, for example in case of cancellation. The colors pickers of the different types of browsers do not make friends with each other, and even less with JS code
const colorChooser = document.querySelector('#color-chooser')
colorChooser.onclick=_=>
{
colorChooser.disabled = true
colorChooser.ref = null
}
colorChooser.onchange=_=>
{
colorChooser.sp.style.setProperty('--onColor', colorChooser.value)
colorChooser.classList.add('noDisplay')
colorChooser.disabled = false
}
document.querySelectorAll("span.colorChoose").forEach( sp =>
{
let spPos = { top: (sp.offsetTop -10) + 'px' , left: (sp.offsetLeft + sp.offsetWidth +10)+'px' }
sp.onclick =_=>
{
if (!colorChooser.classList.toggle('noDisplay', colorChooser.ref===sp.id))
{
colorChooser.value = sp.style.getPropertyValue('--onColor')
colorChooser.style.top = spPos.top
colorChooser.style.left = spPos.left
colorChooser.ref = sp.id
colorChooser.sp = sp
}
else
{
colorChooser.ref = null
colorChooser.disabled = false
}
}
}).noDisplay {
display : none;
}
span.colorChoose {
cursor : pointer;
border-bottom : 3px solid var(--myColor)
}
span.colorChoose:before {
content : ' ';
display : inline-block;
width : .9em;
height : .9em;
border : 1px solid black;
margin-right : .2em;
background : var(--onColor);
}
#color-chooser {
position : absolute;
top : 0;
left : 0;
} <input type="color" id="color-chooser" value="" class="noDisplay">
<div>
<h3>Border</h3>
<span id="border-id-ref" class="colorChoose" style="--onColor:#ff0000">borderColor</span>
<h3>Background</h3>
<span id="bg-id-ref" class="colorChoose" style="--onColor:#00ff00">backgroundColor</span>
</div>