HTML & Js Color Picker：我做错了什么？

Question

问题是，无论你使用什么控件，它都会影响蓝色。

我猜这可能与我正在循环声明控件并分配它们的处理程序这一事实有关，但老实说，我不知道我做错了什么，或者解决方案是否只是手动执行此操作，一个接一个。

这是该项目的副本。

let 
  // This one will contain all the elements
  picker = document.createElement("div")
  // And this one the color controls
, values = document.createElement("form")
  // This' the color preview
, preview = document.createElement("div")
  // The preview initializes and updates based on this values
, colors = { red : 200, green : 0, blue : 0 }
  // This validates if a value is between 0 and 255
, vv = { min : 0, max : 255 }
, validVal = (n) => vv.min <= n && n <= vv.max
  // And this' just a style string
, style = ""
;
// This one changes preview's bg color and shows the 
// value inside it
function updatePreview() {
  let rgbString = 
    "rgb(" 
  + [colors.red, colors.green, colors.blue].join(",") 
  + ")";
  preview.style["background-color"] = rgbString;
  preview.innerHTML = rgbString;
}
// Now we define the elements' class names
picker.className  += " color-picker"; 
values.className  += " rgb-values";
preview.className += " preview";
// And their appearance
style += "display : inline-block;";
values.style = style;
style += "width: 200px; height: 200px; border: 1px solid #000;";
preview.style = style;
// Then we add'em to the screen
picker.appendChild(values);
picker.appendChild(preview);
document.body.appendChild(picker);
// And, "finally", we add the controls and their handlers
// One for each color
for (var color in colors) {
  // This are text and slide controls
  let  
    label = document.createElement("label")
  , span  = document.createElement("span")
  , slide = document.createElement("input")
  , text  = document.createElement("input")
  ;
  // We define their general attributes
  label.style = "display: block";
  slide.name = color + "-slide";
  slide.type = "range";
  slide.min  = vv.min;
  slide.max  = vv.max;
  slide.step = "1";
  text.name = color + "-text";
  text.type = "text";
  text.size = "3";
  span.innerHTML = " " + color;
  // And set their initial values
  slide.value = text.value = colors[color];
  // We add'em to screen also
  label.appendChild(slide);
  label.appendChild(text);
  label.appendChild(span);
  values.appendChild(label);
  // And now the handlers
  /* 
    This is the tricky part. 
    I must be doing something wrong here. I guess.
    Pls, help!
  */
  function slideHandler(e) {
    text.value = slide.value;
    colors[color] = slide.value;
    updatePreview();
  }
  slide.oninput = slideHandler;
  function textHandler(e) {
    if (validVal(text.value)) slide.value = text.value;
    colors[color] = slide.value;
    updatePreview();
  }
  text.onchange = textHandler; 
}
// And... Showtime!
updatePreview();

Answer 1

更改slide.name.split('-')[0]的var颜色

法典：

  function slideHandler(e) {(
    text.value = slide.value;
    colors[slide.name.split('-')[0]] = slide.value;
    updatePreview();)}

(function() {
  window.onload = function() {
    let
      // This one will contain all the elements
      picker = document.createElement("div")
      // And this one the color controls
      ,
      values = document.createElement("form")
      // This' the color preview
      ,
      preview = document.createElement("div")
      // The preview initializes and updates based on this values
      ,
      colors = {
        red: 200,
        green: 0,
        blue: 0
      }
      // This validates if a value is between 0 and 255
      ,
      vv = {
        min: 0,
        max: 255
      },
      validVal = (n) => vv.min <= n && n <= vv.max
      // And this' just a style string
      ,
      style = "";
    // This one changes preview's bg color and shows the 
    // value inside it
    function updatePreview() {
      let rgbString =
        "rgb(" +
        [colors.red, colors.green, colors.blue].join(",") +
        ")";
      preview.style["background-color"] = rgbString;
      preview.innerHTML = rgbString;
    }
    // Now we define the elements' class names
    picker.className += " color-picker";
    values.className += " rgb-values";
    preview.className += " preview";
    // And their appearance
    style += "display : inline-block;";
    values.style = style;
    style += "width: 200px; height: 200px; border: 1px solid #000;";
    preview.style = style;
    // Then we add'em to the screen
    picker.appendChild(values);
    picker.appendChild(preview);
    document.body.appendChild(picker);
    // And, "finally", we add the controls and their handlers
    // One for each color
    for (var color in colors) {
      // This are text and slide controls
      let
        label = document.createElement("label"),
        span = document.createElement("span"),
        slide = document.createElement("input"),
        text = document.createElement("input");
      // We define their general attributes
      label.style = "display: block";
      slide.name = color + "-slide";
      slide.type = "range";
      slide.min = vv.min;
      slide.max = vv.max;
      slide.step = "1";
      text.name = color + "-text";
      text.type = "text";
      text.size = "3";
      span.innerHTML = " " + color;
      // And set their initial values
      slide.value = text.value = colors[color];
      // We add'em to screen also
      label.appendChild(slide);
      label.appendChild(text);
      label.appendChild(span);
      values.appendChild(label);
      // And now the handlers
      /* 
        This is the tricky part. 
        I must be doing something wrong here. I guess.
        Pls, help!
      */
      function slideHandler(e) {
        text.value = slide.value;
        colors[slide.name.split('-')[0]] = slide.value;
        updatePreview();
      }
      slide.oninput = slideHandler;
      function textHandler(e) {
        if (validVal(text.value)) slide.value = text.value;
        colors[slide.name.split('-')[0]] = slide.value;
        updatePreview();
      }
      text.onchange = textHandler;
    }
    // And... Showtime!
    updatePreview();
  };
})();

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
</body>