Javascript-从具有相同id的多个div向函数传递值

我有一个关于我找到并编辑的脚本的小问题。 最初，脚本是从具有特定id的单个输入中获取值。 我需要的是从多个div发送一个特定的值（这些div是从具有多个对象的变量-function colors（）动态创建的）。 但是，由于它是一个函数，它不能为所讨论的div生成多个id（实际上，它可以通过将每个对象的名称生成为div id来实现——但是这样函数就不知道从何处获取值，我错了吗？）。 更清楚地说，以下是javascript代码：

<script type="text/javascript" src="jquery-2.1.1.js"></script>
    <div><img src="mug.png" id="mug" onload="getPixels(this)" /></div>
    <input type="text" id="color" value="#6491ee" />
    <input type="button" value="change color" onclick="changeColor()">
    <div id="colorsContainer"></div>
    <script type="text/javascript">
var colors = [
            { nume: "Orange", hex: "#ff6439" },
            { nume: "Blue", hex: "#488dff" }
            ];
function colors(){
for(i=0;i<colors.length;i++){
    var theDiv = document.getElementById("colorsContainer");
    theDiv.innerHTML += "<div id='color1' value="+colors[i].hex+" onclick='changeColor()'>"+colors[i].name+"</div><div style='background-color: "+colors[i].hex+"; width: 120px; height:120px;'></div><br>";
}
}
window.onload = colors;
        var mug = document.getElementById("mug");
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var originalPixels = null;
        var currentPixels = null;

        function HexToRGB(Hex)
        {
            var Long = parseInt(Hex.replace(/^#/, ""), 16);
            return {
                R: (Long >>> 16) & 0xff,
                G: (Long >>> 8) & 0xff,
                B: Long & 0xff
            };
        }

        function changeColor()
        {
            if(!originalPixels) return;
            var newColor = HexToRGB(document.getElementById("color").value);

            for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
            {
                if(currentPixels.data[I + 3] > 0)
                {
                    currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
                    currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
                    currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
                }
            }

            ctx.putImageData(currentPixels, 0, 0);
            mug.src = canvas.toDataURL("image/png");
        }

        function getPixels(img)
        {
            canvas.width = img.width;
            canvas.height = img.height;

            ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
            originalPixels = ctx.getImageData(0, 0, img.width, img.height);
            currentPixels = ctx.getImageData(0, 0, img.width, img.height);

            img.onload = null;
        }
    </script>

变量颜色=[
{nume:“橙色”，十六进制：#ff6439}，
{nume:“蓝色”，十六进制：{488dff}
];
函数颜色（）{
对于（i=0；i>>16）和0xff，
G:（长>>>8）和0xff，
B:Long&0xff
};
}
函数changeColor（）
{
如果（！originalPixels）返回；
var newColor=HexToRGB（document.getElementById（“color”）.value）；
对于（变量I=0，L=originalPixels.data.length；I0）
{
currentPixels.data[I]=originalPixels.data[I]/255*newColor.R；
currentPixels.data[I+1]=originalPixels.data[I+1]/255*newColor.G；
currentPixels.data[I+2]=原始像素.data[I+2]/255*newColor.B；
}
}
ctx.putImageData（当前像素，0,0）；
mug.src=canvas.toDataURL（“image/png”）；
}
函数getPixels（img）
{
canvas.width=img.width；
canvas.height=img.height；
ctx.drawImage（img，0，0，img.naturalWidth，img.naturalHeight，0，0，img.width，img.height）；
原始像素=ctx.getImageData（0,0，img.width，img.height）；
currentPixels=ctx.getImageData（0，0，img.width，img.height）；
img.onload=null；
}

---

同样，我如何修改脚本，以便在单击其中一个div时将值发送到colors（）函数中每个生成div的changeColor（）函数？

一种方法是在changeColor函数中声明一个形式参数。你有两个选择：

• 要直接传递颜色值，请执行以下操作：

  函数changeColor（newColor）{…}
  函数颜色（）
  {
  ...
  theDiv.innerHTML+=“…
  ”；
  ...
  }

  您不应该有多个具有相同id的元素。对许多元素具有相同的

  id

  是无效的。使用

  class

  并使用

  for

  循环遍历

  changeColor（）

  函数中的每一个。@SpencerWieczorek，我理解类的部分，但我不理解你建议的另一部分。你的代码不是很奇怪吗。你定义颜色两次。一次作为数组，另一次作为函数。数组应该被覆盖。尝试第二个建议后，我在调试中遇到以下错误：未捕获类型错误：无法读取第28行的未定义属性'replace'->var Long=parseInt（Hex.replace（/^#/，“”），16）；您的第一个解决方案进行了一些调整，我将var newColor行更改为var newColor=HexToRGB（newColor）。非常感谢您的时间和指导！