javascript GetElementsByCassName和setAttribute不工作

我添加了4个“range”类型的输入，并使用它们的值来设置另一个元素的RGBA值，但它不起作用

window.onload = init;

function init(){
document.getElementById("colorR").onchange() = setColors;
document.getElementById("colorG").onchange() = setColors;
document.getElementById("colorB").onchange() = setColors;
document.getElementById("Opacity").onchange() = setColors;  
}
function setColors(){
var r = document.getElementById("colorR").value;
var g = document.getElementById("colorG").value;
var b = document.getElementById("colorB").value;
var a = document.getElementById("Opacity").value;

    //alert(r+", "+g+", "+b+", "+a);

document.getElementsByClassName("previewAreaBox")[0].style.setAttribute(
"background-color", "rgba(",r+", "+g+", "+b+", "+a/100+");");

}

任何帮助都将不胜感激。谢谢

style.setAttribute(

setAttribute

应用于元素，而不是样式

背景色是样式属性，而不是属性

document.getElementsByClassName("previewAreaBox")[0].style.backgroundColor = ".."

setAttribute

应用于元素，而不是样式

背景色是样式属性，而不是属性

document.getElementsByClassName("previewAreaBox")[0].style.backgroundColor = ".."

至少

document.getElementById("colorR").onchange() = setColors;

应改为

document.getElementById("colorR").onchange = setColors;

如果不进行更改，其余代码将根本无法运行，因为

onchange（）

调用事件处理程序，而不带括号的

onchange

用于分配事件处理程序

同时

正如Connor有用的评论所指出的，Andy的回答包含了部分解决方案，我还注意到您的代码中还有一个错误：

"rgba(",r+", "+g+", "+b+", "+a/100+");"

需要是这样的（加上现在的逗号，并在算术中加上括号，以防止其左操作数过早转换为字符串）：

因此，将其插入Andy的答案中，

setColors

函数的最后一行应该如下所示：

document.getElementsByClassName("previewAreaBox")[0].style.backgroundColor = "rgba(" +r+ ", " +g+ ", " +b+ ", " + (a/100) +");";

至少

document.getElementById("colorR").onchange() = setColors;

应改为

document.getElementById("colorR").onchange = setColors;

如果不进行更改，其余代码将根本无法运行，因为

onchange（）

调用事件处理程序，而不带括号的

onchange

用于分配事件处理程序

同时

正如Connor有用的评论所指出的，Andy的回答包含了部分解决方案，我还注意到您的代码中还有一个错误：

"rgba(",r+", "+g+", "+b+", "+a/100+");"

需要是这样的（加上现在的逗号，并在算术中加上括号，以防止其左操作数过早转换为字符串）：

因此，将其插入Andy的答案中，

setColors

函数的最后一行应该如下所示：

document.getElementsByClassName("previewAreaBox")[0].style.backgroundColor = "rgba(" +r+ ", " +g+ ", " +b+ ", " + (a/100) +");";

---

好的，这里有一些问题

1。您需要将函数分配给更改事件，而不是调用更改事件。

window.onload = init;


var elementR, elementG, elementB, opacityElement;

function init(){
   elementR = document.getElementById("colorR");
   elementG = document.getElementById("colorG");
   elementB = document.getElementById("colorB");
   opacityElement = document.getElementById("Opacity");

   // Set change events
   elementR.onchange = 
   elementG.onchange = 
   elementB.onchange = 
   opacityElement.onchange = setColors;
}
function setColors(){
    var r = elementR.value,
        g = elementG.value,
        b = elementB.value,
        a = opacityElement.value,
        preview = document.getElementsByClassName("previewAreaBox")[0];
        preview.style.backgroundColor =  'rgba(' + r + ',' + g + ',' + b + ',' + a / 100 + ')';
}

2。在样式上不使用setAttribute，而是使用它在元素上设置属性。

window.onload = init;


var elementR, elementG, elementB, opacityElement;

function init(){
   elementR = document.getElementById("colorR");
   elementG = document.getElementById("colorG");
   elementB = document.getElementById("colorB");
   opacityElement = document.getElementById("Opacity");

   // Set change events
   elementR.onchange = 
   elementG.onchange = 
   elementB.onchange = 
   opacityElement.onchange = setColors;
}
function setColors(){
    var r = elementR.value,
        g = elementG.value,
        b = elementB.value,
        a = opacityElement.value,
        preview = document.getElementsByClassName("previewAreaBox")[0];
        preview.style.backgroundColor =  'rgba(' + r + ',' + g + ',' + b + ',' + a / 100 + ')';
}

3。您应该缓存元素。

window.onload = init;


var elementR, elementG, elementB, opacityElement;

function init(){
   elementR = document.getElementById("colorR");
   elementG = document.getElementById("colorG");
   elementB = document.getElementById("colorB");
   opacityElement = document.getElementById("Opacity");

   // Set change events
   elementR.onchange = 
   elementG.onchange = 
   elementB.onchange = 
   opacityElement.onchange = setColors;
}
function setColors(){
    var r = elementR.value,
        g = elementG.value,
        b = elementB.value,
        a = opacityElement.value,
        preview = document.getElementsByClassName("previewAreaBox")[0];
        preview.style.backgroundColor =  'rgba(' + r + ',' + g + ',' + b + ',' + a / 100 + ')';
}

---

无法工作，因为

onchange（）实际上触发事件，而不将函数分配给它

您也可以像这样对rgba使用
Array.join

var rgba = [elementR.value, elementG.value, elementB.value, 
            opacityElement.value / 100];
preview.style.backgroundColor =  'rgba(' + rgba.join(',') + ')';

好的，这里有一些问题

1。您需要将函数分配给更改事件，而不是调用更改事件。

window.onload = init;


var elementR, elementG, elementB, opacityElement;

function init(){
   elementR = document.getElementById("colorR");
   elementG = document.getElementById("colorG");
   elementB = document.getElementById("colorB");
   opacityElement = document.getElementById("Opacity");

   // Set change events
   elementR.onchange = 
   elementG.onchange = 
   elementB.onchange = 
   opacityElement.onchange = setColors;
}
function setColors(){
    var r = elementR.value,
        g = elementG.value,
        b = elementB.value,
        a = opacityElement.value,
        preview = document.getElementsByClassName("previewAreaBox")[0];
        preview.style.backgroundColor =  'rgba(' + r + ',' + g + ',' + b + ',' + a / 100 + ')';
}

2。在样式上不使用setAttribute，而是使用它在元素上设置属性。

window.onload = init;


var elementR, elementG, elementB, opacityElement;

function init(){
   elementR = document.getElementById("colorR");
   elementG = document.getElementById("colorG");
   elementB = document.getElementById("colorB");
   opacityElement = document.getElementById("Opacity");

   // Set change events
   elementR.onchange = 
   elementG.onchange = 
   elementB.onchange = 
   opacityElement.onchange = setColors;
}
function setColors(){
    var r = elementR.value,
        g = elementG.value,
        b = elementB.value,
        a = opacityElement.value,
        preview = document.getElementsByClassName("previewAreaBox")[0];
        preview.style.backgroundColor =  'rgba(' + r + ',' + g + ',' + b + ',' + a / 100 + ')';
}

3。您应该缓存元素。

window.onload = init;


var elementR, elementG, elementB, opacityElement;

function init(){
   elementR = document.getElementById("colorR");
   elementG = document.getElementById("colorG");
   elementB = document.getElementById("colorB");
   opacityElement = document.getElementById("Opacity");

   // Set change events
   elementR.onchange = 
   elementG.onchange = 
   elementB.onchange = 
   opacityElement.onchange = setColors;
}
function setColors(){
    var r = elementR.value,
        g = elementG.value,
        b = elementB.value,
        a = opacityElement.value,
        preview = document.getElementsByClassName("previewAreaBox")[0];
        preview.style.backgroundColor =  'rgba(' + r + ',' + g + ',' + b + ',' + a / 100 + ')';
}


无法工作，因为
onchange（）实际上触发事件，而不将函数分配给它

您也可以像这样对rgba使用
Array.join

var rgba = [elementR.value, elementG.value, elementB.value, 
            opacityElement.value / 100];
preview.style.backgroundColor =  'rgba(' + rgba.join(',') + ')';

打开浏览器的开发人员控制台，您将看到错误。当某些东西不起作用时，您应该首先查看它。当您调用
document.getElementById（“…”）.onchange（）=setColors
时，您正在执行任何附加的函数。去掉括号，使其看起来像这样：
document.getElementById（“…”）.onchange=setColors
。通过这种方式设置变量，新值（函数）将在稍后调用。感谢疯狂训练和smakateermtd+1，因为当大多数新用户接受答案并消失时，您正在表达您的感激之情。欢迎来到堆栈溢出！感谢您的好意亲爱的Joseph打开浏览器的开发者控制台，您将看到错误。当某些东西不起作用时，您应该首先查看它。当您调用
document.getElementById（“…”）.onchange（）=setColors
时，您正在执行任何附加的函数。去掉括号，使其看起来像这样：
document.getElementById（“…”）.onchange=setColors
。通过这种方式设置变量，新值（函数）将在稍后调用。感谢疯狂训练和smakateermtd+1，因为当大多数新用户接受答案并消失时，您正在表达您的感激之情。欢迎来到堆栈溢出！感谢你的好意亲爱的约瑟芬同意了，谁会支持和否决我们的答案？？也许这是我们讨论式的回答方式。一些人认为，回答者应该简单地说出答案，然后就去做。有一次有人告诉我。（他们在我之后没有经过讨论就重复了我的相同答案，然后获得了六倍多的选票，这是正确答案的功劳。但我得到的教训是，他们告诉了我这可能发生的原因。然而，我仍然相信解释。）啊，我正期待着获得一枚徽章，作为一个负票的公认答案。。。。但是我没有……我同意你的观点，更深入的解释可以为更多的人服务，从初学者到高级。事实上，你已经有了坚韧的徽章！因为它不会影响你是否获得徽章，我将+1你的答案，因为你在上面有-1是不公平的。同意，谁会赞成和反对我们的答案？？也许这是我们讨论式的回答方式。一些人认为，回答者应该简单地说出答案，然后就去做。有一次有人告诉我。（他们在我之后没有经过讨论就重复了我的相同答案，然后获得了六倍多的选票，这是正确答案的功劳。但我得到的教训是，他们告诉了我这可能发生的原因。然而，我仍然相信解释。）啊，我正期待着获得一枚徽章，作为一个负票的公认答案。。。。但是我没有……我同意你的观点，更深入的解释可以为更多的人服务，从初学者到高级。事实上，你已经有了坚韧的徽章！因为这不会影响你是否获得徽章，我