javascript getElementsByClassName et setAttribute ne fonctionnant pas

Question

J'ai ajouté 4 entrées de type "plage" et utilisé leurs valeurs pour définir la valeur RGBA d'un autre élément, mais cela ne fonctionne pas.

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

} 

Toute aide serait grandement appréciée. Merci.

Answer 1

Ok, donc il y a quelques problèmes ici

1. Vous devez assigner la fonction à l'événement change, n'appelle pas l'événement change.

2. Vous n'utilisez pas setAttribute sur le style, vous l'utilisez pour définir un attribut sur un élément.

3. Vous devriez mettre en cache vos éléments.

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; 

ne fonctionnera pas car onchange(); déclenche en fait l'événement et n'attribue pas la fonction à lui.

Vous pouvez également utiliser Array.join pour la rgba comme si

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

Answer 2

style.setAttribute(

setAttribute applique à un élément, pas le style.

Et background-color est une propriété de style, pas un attribut.

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

Answer 3

Au minimum,

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

devrait être remplacé

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

Le reste de votre code ne fonctionnera pas du tout sans faire ce changement, parce que onchange() appelle le gestionnaire d'événement tandis que onchange sans parenthèses est utilisé pour affecter le gestionnaire d'événements.

AUSSI

Comme l'a noté un commentaire utile de Connor, la réponse d'Andy contient une partie de la solution, et j'ai aussi remarqué une plus erreur dans votre code:

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

doit être quelque chose comme ça (plus où une virgule est maintenant, et des parenthèses autour de l'arithmétique pour garder son opérande gauche d'être converti en une chaîne prématurément):

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

brancher Alors que dans la réponse d'Andy, la fonction setColors devrait avoir sa dernière ligne comme celui-ci:

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