Foros del Web » Programando para Internet » Javascript »

Cambiar clase de un objecto clickando en otro objeto

Estas en el tema de Cambiar clase de un objecto clickando en otro objeto en el foro de Javascript en Foros del Web. Hola soy bastante nuevo en esto de javascript. El tema es el siguiente. Tengo una lista de links de class "menulink": Código: <div class="linkactivo"> <a ...
  #1 (permalink)  
Antiguo 22/09/2011, 09:33
Avatar de geclos  
Fecha de Ingreso: febrero-2011
Ubicación: Barcelona, Spain, Spain
Mensajes: 17
Antigüedad: 13 años, 2 meses
Puntos: 0
Cambiar clase de un objecto clickando en otro objeto

Hola soy bastante nuevo en esto de javascript.

El tema es el siguiente.

Tengo una lista de links de class "menulink":
Código:
<div class="linkactivo">
                	<a href="quees14cg.html" class="menulink">Qué es 14CG?</a>
                	</div>
                	<div class="linkinactivo">
                    <a href="vision.html" class="menulink">Visión, Misión y Valores</a>
                    </div>
                    <div class="linkinactivo">
                    <a href="equipo.html" class="menulink">Equipo</a>
                    </div>
                    <div class="linkinactivo">
                    <a href="comotrabajamos.html" class="menulink">Como trabajamos</a>
                    </div>
La idea es que al clickar en alguno de estos links, pueda cambiar la class de otros objetos situados mas abajo y de class "contentvisible" y "contentnovisible" (dependiendo de si quiero que sean visibles o no).

Este es el javascript que tengo de momento:
Código:
window.onload = initAll();

function initAll() {
	var allLinks = document.getElementsByTagName("a");
	for ( var i = 0; i<allLinks.lenght; i++) {
		if (allLinks[i].className == "menulink") {
			allLinks[i].onClick = toogleMenu();
		}
	}
}

function toggleMenu() {
				var startId = this.href.lastIndexOf("/")+1;
				var stopId = this.href.lastIndexOf(".");
				
				var myId = this.href.substring(startId,stopId);
				var myIdClass = document.getElementById(myId).className;
				
				if (myIdClass == "contentvisible") {
        	myIdClass = "contentnovisible";
			} else {
				myIdClass = "contentvisible";
				}
				return false;
			}
Como vereis por el codigo, para obtener el Id del objeto que quiero cambiar lo que hago es sacarlo del href del link que he apretado con la funcion substring.

El problema es que al cargar la pagina nada de esto ocurre y si apreto en alguno de los links me redirige al href correspondiente, que no existe.

Gracias de antemano por la ayuda.

Un saludo.

Última edición por geclos; 22/09/2011 a las 11:49
  #2 (permalink)  
Antiguo 22/09/2011, 12:09
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años
Puntos: 344
Respuesta: Cambiar clase de un objecto clickando en otro objeto

Tienes algunos fallos que he solucionado y ya se ejecuta, en una de las sentencias:

Código Javascript:
Ver original
  1. var myIdClass = document.getElementById(myId).className;

document.getElementById(myId) da null (no hay ningún elemento con ese id) y, por tanto, no hay propiedad className. Ya verás como lo arreglas.

Código Javascript:
Ver original
  1. window.onload = initAll;
  2.  
  3. function initAll() {
  4.     var allLinks = document.getElementsByTagName("a");
  5.     for ( var i = 0; i<allLinks.length; i++) {
  6.         if (allLinks[i].className == "menulink") {
  7.             allLinks[i].onclick = toggleMenu;
  8.         }
  9.     }
  10. }
  11.  
  12. function toggleMenu() {
  13.                 var startId = this.href.lastIndexOf("/")+1;
  14.                 var stopId = this.href.lastIndexOf(".");
  15.                
  16.                 var myId = this.href.substring(startId,stopId);
  17.                 var myIdClass = document.getElementById(myId).className;
  18.                
  19.                 if (myIdClass == "contentvisible") {
  20.             myIdClass = "contentnovisible";
  21.             } else {
  22.                 myIdClass = "contentvisible";
  23.                 }
  24.                 return false;
  25.             }

Fíjate en que no hay que poner los paréntesis cuando asignas una función a un evento (por que sino le estás asignando el resultado de llamarla) y el evento es onclick en minúsculas
  #3 (permalink)  
Antiguo 22/09/2011, 16:23
Avatar de geclos  
Fecha de Ingreso: febrero-2011
Ubicación: Barcelona, Spain, Spain
Mensajes: 17
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Cambiar clase de un objecto clickando en otro objeto

Gracias por las correcciones.

Aunque el debugger del Google Chrome ya no me da ningun error sigue sin funcionar el script.

Cuando clickeo en los links sencillamente no ocurre nada, no me redirige a ningun href (lo cual ya es un avance) pero tampoco hace el cambio de class que en teoria tendria que hacer.

Alguna idea de cual puede ser el problema ?

Gracias!
  #4 (permalink)  
Antiguo 22/09/2011, 16:29
Avatar de geclos  
Fecha de Ingreso: febrero-2011
Ubicación: Barcelona, Spain, Spain
Mensajes: 17
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Cambiar clase de un objecto clickando en otro objeto

Estoy pensando que tal vez estoy haciendo algo mal en el codigo del script para coger la id del objeto cuya class quiero cambiar.

Para aclarar cosas pego los div cuya class quiero cambiar:
Código:
<div id="quees14cg" class="contentvisible">               
       		</div>
            
            <div id="vision" class="contentnovisible">
            </div>
            
            <div id="equipo" class="contentnovisible">
            </div>
            
            <div id="comotrabajamos" class="contentnovisible">
            </div>
Como puede ver la id de los objetos cuya class quiero cambiar corresponde al href del link correspondiente. En teoria la id se coge a partir del href que se clickea con esta parte del codigo script:

Código:
var startId = this.href.lastIndexOf("/")+1;
                var stopId = this.href.lastIndexOf(".");
                
                var myId = this.href.substring(startId,stopId);
                var myIdClass = document.getElementById(myId).className;
Alguien ve algun problema en todo esto ?

Gracias y un saludo!

Etiquetas: clase, html, objeto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:13.