HTML＆amp; Js颜色选择器：我做错了什么？

Question

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

我猜这可能与我宣布控件并在循环中分配处理程序这一事实有关，但老实说，我不知道我在做什么。做错了，或者解决办法就是一个一个地手动完成。

Here's该项目的副本。

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

更改var

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

代码：

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

＆＃13;

＆＃13;

(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();
  };
})();

＆＃13;

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

<body>
</body>

＆＃13;

＆＃13;

＆＃13;