javascript getElementsByClassName和setAttribute不工作

我已經添加了4個「範圍」類型輸入，並使用它們的值來設置另一個元素的RGBA值，但它不起作用。javascript getElementsByClassName和setAttribute不工作

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+");"); 

}

任何幫助將不勝感激。謝謝。

來源

2013-07-26 mtd

打開瀏覽器的開發者控制檯，你會看到錯誤。這應該是你找不到工作的第一個地方。 –

當你調用'document.getElementById（「...」）。onchange（）= setColors'時，你正在執行任何附加的函數。拿掉括號，看起來像這樣：'document.getElementById（「...」）。onchange = setColors'。這樣你就可以設置變量，而新值（一個函數）將在稍後調用。 – smakateer

謝謝Crazy Train和smakateer – mtd

好了，這裏有幾個問題

1.您需要的功能分配給更改事件，而不是調用更改事件。

2.您不在樣式上使用setAttribute，您可以使用它在元素上設置屬性。

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 + ')'; 
}

Element.onchange() = something;

不會起作用，因爲實際上onchange();觸發事件，並且不與功能分配給它。

您還可以使用Array.join的RGBA像這樣

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

來源

2013-07-27 00:14:03 iConnor

ouch ...... :) .. – iConnor

謝謝Connor;） – mtd

同意，誰是一直往下投票我們的答案？也許這是我們討論的回答方式。有些人認爲回答者應該簡單地告訴答案並完成。這就是有人告訴我的一次。（他們在沒有我的討論的情況下在我後面重複了同樣的答案，然後得到了6倍的選票，並因爲得到了正確的答案而獲得讚譽。但是我獲得的教訓是，他們告訴我爲什麼可能發生這種情況，但我仍然相信解釋） –

style.setAttribute(

setAttribute適用於某個元素，而不是風格。

而background-color是一種樣式屬性，而不是屬性。

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

來源

2013-07-26 23:56:56

至少，

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

應改爲

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

你的代碼的其餘部分將沒有做出這樣的轉變在所有的運行，因爲onchange()調用事件處理程序而不帶圓括號的onchange用於分配事件處理程序。

ALSO

正如Connor的有益的意見指出，安迪的回答包含了解決方案的一部分，而我也注意到在你的代碼多了一個錯誤：

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

需求是這樣的（加上逗號現在的位置，以及算術運算周圍的括號以防止其左操作數被過早轉換爲字符串）：

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

因此堵塞是安迪的回答，setColors功能應該有它的最後一行是這樣的：

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

來源

2013-07-26 23:59:47

你們都有一部分的答案.... – iConnor

謝謝約瑟夫;） – mtd

不客氣，mtd。 –

javascript getElementsByClassName和setAttribute不工作

回答

相關問題