JavaScript Changement de couleur BG

Question

J'ai fait un div avec background-color set à rgb (0,0,0); et je veux changer sa couleur sur clic avec javascript. J'ai fait une fonction pour le faire.

function change(){ 
var x = 1; 
var y = x + 100; 
document.getElementById("box").style.backgroundColor = "rgb(" + y + "," + y + "," + y + ")"; } 

Cela fonctionne bien, mais je ne peux changer la couleur de la div qu'une seule fois. Ce que je veux faire, c'est obtenir la valeur de couleur de div et la mettre à x et exécuter à nouveau la fonction. Donc le bg ira comme du noir-> gris-> blanc à chaque clic. En fonction de la variable y.

Je peux obtenir la valeur de la div mais elle l'obtiendra dans "rgb (0,0,0);" format. Je ne sais pas quoi faire après avoir reçu ça. Comment manipuler uniquement les entiers dans rgb (0,0,0); ?

Answer 1

Vous pouvez stocker la valeur x actuelle data attributs:

function change(box) { 
    var x = +box.getAttribute('data-x'), // +box.dataset.x for modern browsers 
     y = x + 100; 
    box.style.backgroundColor = "rgb(" + y + "," + y + "," + y + ")"; 
    box.setAttribute('data-x', y); 
} 

HTML

<div id="box" onclick="change(this)"></div> 

Démo: http://jsfiddle.net/Wuz75/

Answer 2

Au lieu d'essayer d'analyser la couleur, puisque vos couleurs seront statiques , juste faire un tableau de couleurs, et garder une trace de l'index.

var colors = [ 
     "rgb(0,0,0)", 
     "rgb(100,100,100)", 
     "rgb(255,255,255)" 
    ], 
    c = 0; 

Ensuite, dans votre fonction, utilisez c pour obtenir la couleur suivante, puis incrémenter ou remis à 0. Par conséquent, chaque fois que vous exécutez la fonction, elle passe d'une couleur à l'autre dans le tableau.

Answer 3

Ou vous pouvez utiliser:

function change(x) { 
    var el = document.getElementById('color'); 
    var rgb = el.style.backgroundColor.replace(/rgb|\(|\)|\s/g, '').split(','); 

    if (rgb == "") { rgb = [0,0,0] }; 

    for (var a = 0; a < rgb.length; a++) { 
    rgb[a] = parseInt(rgb[a]) + x; 
    } 

    el.style.backgroundColor = 'rgb('+rgb.join(',')+')'; 
} 

Voici une démo: http://jsbin.com/ozepaz/1/edit