Cambiar varias clases con un evento mediante Javascript

[Albuss]

Hola caballeros!,

Pues estoy atascado , estoy intentando cambiar varias clases con el siguiente método :

Sabiendo que en la hoja de estilo tenemos :

Código:

#contenedorB {

	
}

#contenedorA {
	
	
}

.A {
	width:100px;
	height:100px;
	border:1px dashed #FF0000;		
}

.AA {
	width:100px;
	height:100px;
	border:5px dashed #FF0000;		
}

Intento de cambiar varias clases a div con el evento onmosedown :

Código:

<div class="A" onmousedown="document.getElementById('contenedorB','contenedorA').className='AA'">
</div>

<div id="contenedorB" class="A"></div>
<div id="contenedorA" class="A"></div>

Y pregunta, ya que estoy un poco desorientado con todo esto, ¿si en vez de cambiar una clase , quisiese poner a cada div una clase distinta?, ovbiamente partiendo del unico evento. ¿Que tendria que modificar?

[ZiTAL]

Código HTML:

<div class="A" onmousedown="nombre_funcion(['contenedorB', 'contenedorA'], 'AA')">
</div> 

Código Javascript:

<script type="text/javascript">
function nombre_funcion(array, c_name)
{
  for(i in array)
    document.getElementById(i).className = c_name;
}
</script>
 

[Albuss]

@ZiTAL Que bueno! , gracias!! , Supongo que a la funcion podré agregarle todos los nombres de clases que quiera , ¿no?


Sois una panda de cracks, los que ayudais!!!

[Albuss]

Siento decirlo, pero a la hora de la practica NO cambia las clases ... :(


he probado con esta variante , pero nada :

Código:

<script languaje="JavaScript" type="text/javascript">

function nombre_funcion(array, c_name) {
 	
	for (j=0;j<i;j++){
    document.getElementById(i).className = AA;
	}
}
</script>

[caricatos]

Hola:

Hay errores en tu código:

Iniciado por Albuss

Siento decirlo, pero a la hora de la practica NO cambia las clases ... :(


he probado con esta variante , pero nada :

Código:

<script languaje="JavaScript" type="text/javascript">

function nombre_funcion(array, c_name) {
 	
	for (j=0;j<i;j++){
    document.getElementById(i).className = AA;
	}
}
</script>

Los valores del bucle debes revisarlos, y no veo que uses los parámetros de la función; y "AA" ¿no debería estar entrecomillado...?

Saludos

[Albuss]

Srry fallo mio, fue copie una variente desesperada xD , ME me referia a estos dos codigos vasados en los que ha dado ZiTAL.

el original :

Código:

<script type="text/javascript">
function nombre_funcion(array, c_name)
{
  for(i in array)
    document.getElementById(i).className = c_name;
}
</script>

las variantes he que probado (con buena sintaxsis, en la medida de lo que yo se) :

Código:

function nombre_funcion(array, c_name) {
  for(i in document) {
    document.getElementById(i).className = 'AA';

}
</script>

y

Código:

<script languaje="JavaScript" type="text/javascript">

function nombre_funcion(array, c_name) {
 	
	for (j=0;j<i;j++){
    document.getElementById(i).className ='AA';
	}
}
</script>

En el Body, simplemente intente usando lo que dijo Zital :

Código:

<div class="A" onmousedown="change(['contenedorB', 'contenedorA'], 'AA')">

[ZiTAL]

es array[i] dentro del for sorry:

Código Javascript:

<script type="text/javascript">
function nombre_funcion(array, c_name)
{
  for(i in array)
    document.getElementById(array[i]).className = c_name;
}
</script>
 

[caricatos]

Hola:

Los arrays leídos con ese tipo de bucle asociativo puede darte problemas, porque se leen todos los atributos y el "length" también (no sé si en todos los navegadores pero en ocasiones me ha dado problemas y para estos casos prefiero usar el bucle for clásico):

for (i = 0, total = array.length; i < total; i++)...

además no debes usar i sino array[i]...

Comprueba esas cosillas y nos cuentas...

Saludos

[Albuss]

Muchas gracias @Zital!, Da gusto participar en este foro, aprendo una cantidad!

[Albuss]

@caricatos , Tengo entendido que es una prioridad Capital usar El bucle For in usando onjetos , en este caso Array´s , ¿tanta diferencia hay de rendimiento?

Pregunto, por que vengo de C++ , javascript lo uso con la sintaxis de C++ Y por ahora voy tirando, yo tambien prefiero por simplicidad y comprension el bucle For normal xD

[ZiTAL]

Iniciado por caricatos

Hola:

Los arrays leídos con ese tipo de bucle asociativo puede darte problemas, porque se leen todos los atributos y el "length" también (no sé si en todos los navegadores pero en ocasiones me ha dado problemas y para estos casos prefiero usar el bucle for clásico):

for (i = 0, total = array.length; i < total; i++)...

además no debes usar i sino array[i]...

Comprueba esas cosillas y nos cuentas...

Saludos

¿que quieres decir que por cada vuelta lee el length del array? menudo churro ._______.

pd: un placer volver a verte :)

[ZiTAL]

De todas formas, instalate el FIREBUG para firefox ya veras que bien se debuggea :)

[Albuss]

¿Puedo concatenar Llamadas a funciones dentro de un unico evento? , es decir, he intentado esto :

Código:

<script type="text/javascript">
function change(array, c_name)
{
  for(i=0 , total=array.length;i<total;i++){
    document.getElementById(array[i]).className = c_name;
	document.getElementById(array[i]).className = c_nameB;
  }
}

 function changeB(array, c_name)
{
  for(i=0 , total=array.length;i<total;i++){
    document.getElementById(array[i]).className = c_name;
  }
 
}
</script>

En el Body

Código:

<div class="A" onmouseover="change(['contenedorB', 'contenedorA'] ,'AA',)" + "changeB(['contenedorC', 'contenedorD'] ,'BB',)"></div>

¿O tendria que declarar varios objetos array´s diferentes?

[ZiTAL]

Iniciado por Albuss

¿Puedo concatenar Llamadas a funciones dentro de un unico evento? , es decir, he intentado esto :

Código:

<script type="text/javascript">
function change(array, c_name)
{
  for(i=0 , total=array.length;i<total;i++){
    document.getElementById(array[i]).className = c_name;
	document.getElementById(array[i]).className = c_nameB;
  }
}

 function changeB(array, c_name)
{
  for(i=0 , total=array.length;i<total;i++){
    document.getElementById(array[i]).className = c_name;
  }
 
}
</script>

En el Body

Código:

<div class="A" onmouseover="change(['contenedorB', 'contenedorA'] ,'AA');changeB(['contenedorC', 'contenedorD'] ,'BB',)"></div>

¿O tendria que declarar varios objetos array´s diferentes?

lo estás haciendo mal por 2 cosas:

1.- tienes:

document.getElementById(array[i]).className = c_name;
document.getElementById(array[i]).className = c_nameB;

dentro de la funcion, para empezar la variable nameB no existe y si existiera estarías sobreescribiendo lo que estás haciendo justo 1 linea más arriba, si quieres concatenar funciones escribelas una detras de otra separatos por ;

Código:

change(['contenedorB', 'contenedorA'] ,'AA');changeB(['contenedorC', 'contenedorD'] ,'BB');

[Albuss]

Genial , gracias!!! ¿es mas recomendable usar eventos javascript "clic()" o html "onclick", para que la web no se ralentice tanto?