Cambiar color a un elemento div en javascript

[reysolisavila]

hola que tal, estoy realizando un proyecto, y bueno tengo algunos problemas con unos divs que estoy generando de manera dinamica, estos deverian funcionar como botones y al pulsarlos que cambien de color, hasta esa parte estan bien, el problema es que cuando pulso otro el anterior se queda pintado, alguien me podria ayudar o dar un tip de como arreglar esto

onclick =pag(this,event) // este onclick ejecuta el script


function pag(obj,e) {

var x1 = new String()
x1 = obj.id;

document.getElementById(x1).style.backgroundColor = '#16A4EB';

}

[MarioAraque]

Creo que cambian de color todos porque les pones el mismo id a los divs, deberías trabajar con clases así los diferencias.

De todos modos el parámetro "obj" hace referencia a this, por lo que si haces esto debería funcionar:

Código Javascript:

function pag(obj,e) {
   obj.style.backgroundColor = '#16A4EB';
}
 

Saludos.

[reysolisavila]

hola , gracias por responder, si funciona de la manera que tu muestras doy clic en un div y lo cambia, doy clic en otro div y lo cambia pero se quedan en ese color y lo que quiero es que solamente al que haya dado clic cambie y los demas vuelvan al color que tenian anteriormente, no se si algunas condiciones puedan servir pero no encuentro la manera

[MarioAraque]

Lo siento, he olvidado eso, asi quedaria:

Código Javascript:

function pag(obj,e) {
   var divs = document.getElementsByClassName('customdiv'),
          j,
          l;
   for(i=0, l = divs.length; i < l; i++) { 
      divs[i].style.backgroundColor = 'transparent';
   }
 
   obj.style.backgroundColor = '#16A4EB';
}
 

Debes ponerle un class a los divs, le puse uno de ejemplo pero debes reemplazarlo por lo que quieras.
No estoy seguro de que funcione "transparent" dentro del style, no lo pude probar al código pero no creo que tenga muchos fallos.

Saludos.