javascript事件监听器通过每个输入改变颜色，颜色选择器

Question

我希望颜色选择器的每个不同颜色输入都可以更改每个 div 背景颜色。 如果我在输入 1 中选择红色，我希望该输入标签的背景颜色正下方的 div 为红色 如果我在输入 2 中选择蓝色，我希望该输入标签的背景颜色正下方的 div 为蓝色。 现在，它正在改变两个 div。 代码如下

var colorSelector;
var defaultColor = "#0000ff";
/**when page loads**/
window.addEventListener("load", startup, false);


function startup() {

  var content_color1 = document.querySelector("#content_color1");
  var content_color2 = document.querySelector("#content_color2");
  /**select input for variable **/
  colorSelector = document.querySelectorAll(".base");
  var i = 0;
  while (i < colorSelector.length) {
    /**default input*/
    colorSelector[i].value = defaultColor;

    colorSelector[i].addEventListener("change", update, false);
    i = i + 1;
  }
}

function update(event) {
  var i = 0;
  while (i < colorSelector.length) {
    if (colorSelector[0].selected = true) {
      content_color1.style.backgroundColor = event.target.value;
    };
    if (colorSelector[1].selected = true) {
      content_color2.style.backgroundColor = event.target.value;
    };
    i = i + 1;

  }
}

<input type="color" class="base ct1">
<div id="content_color1">
  cc1
</div>


<input type="color" class="base ct2">
<div id="content_color2">
  cc2
</div>

Answer 1

一种简单的方法是通过data-* 属性将颜色选择器与其“内容”潜水联系起来：

<input type="color" class="base ct1" data-content="#content_color1">
<div id="content_color1">
  cc1
</div>

然后，在update 上使用它来查找元素并根据需要更新它：

function update(event) {
  var content = document.querySelector(event.target.dataset.content)
  content.style.backgroundColor = event.target.value;
}

活生生的例子：

var colorSelector;
var defaultColor = "#0000ff";
/**when page loads**/
window.addEventListener("load", startup, false);


function startup() {
  /**select input for variable **/
  colorSelector = document.querySelectorAll(".base");
  var i = 0;
  while (i < colorSelector.length) {
    /**default input*/
    colorSelector[i].value = defaultColor;

    colorSelector[i].addEventListener("change", update, false);
    i = i + 1;
  }
}

function update(event) {
  var content = document.querySelector(event.target.dataset.content)
  content.style.backgroundColor = event.target.value;
}

<input type="color" class="base ct1" data-content="#content_color1">
<div id="content_color1">
  cc1
</div>


<input type="color" class="base ct2" data-content="#content_color2">
<div id="content_color2">
  cc2
</div>

Answer 2

我不知道这是否有帮助

        var colorSelector = document.querySelectorAll('.base');
        var div1 = document.getElementById('content_color1');
        var div2 = document.getElementById('content_color2');

        var divs = [div1, div2];

        for(let i = 0; i < colorSelector.length; i++){
            colorSelector[i].addEventListener('change',() => {
                divs[i].style.backgroundColor = colorSelector[i].value;
            });
        }

    <input type="color" class="base ct1">
    <div id="content_color1">
      cc1
    </div>


    <input type="color" class="base ct2">
    <div id="content_color2">
      cc2
    </div>