How to show element near to the clicked tag-CodePudding

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 : )

CodePudding user response：

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>

CodePudding user response：

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>