[SOLUCIONADO] Cambiar los atributos de una caja

[bichomen]

¿Por que no funciona?

CSS:

Código HTML:

#menucv1, #menucv2, #menucv3, #menucv4
	{
		background-color: #7C95FD;		
		font-family: "Roboto-Bold";
		text-align: center;		
		vertical-align: middle;
		position: relative;		
		border: 1px solid #000;	
		box-sizing: border-box;		
		width: 25%;
		height: 30px;
		float: left;
	}

JavaScript:

Código PHP:

  if($_GET['valor']) 
    {    
        $valor = $_GET['valor'];
    }
    else 
    {
        $valor = 1;    
    }
 
echo'
 
<script type="text/javascript">
 
    var menucv = "menucv'.$valor.'";
    alert(menucv);
    document.getElementById(menucv).style.backgroundColor = "#5677FC";
   document.getElementById(menucv).style.borderStyle = "inset";
   alert("Adios");   
</script>
 
'; 
   

HTML:

Código HTML:

<div id="menucv1"><a href="cv.php?valor=1" target="contenedor">Experiencia Profesional</a></div>
	<div id="menucv2"><a href="cv.php?valor=2" target="contenedor">Estudios</a></div>
	<div id="menucv3"><a href="cv.php?valor=3" target="contenedor">Idiomas</a></div>
	<div id="menucv4"><a href="cv.php?valor=4" target="contenedor">Otros</a></div> 

Me muestra correctamente el primer alert, me muestra la variable, pero de ahí no pasa. ¿Estoy haciendo algo mal?

Saludos


bichomen

[ZedGe1505]

El problema es entre el PHP y el JS


No te sirve leer la variable GET de la URL directamente del head en el JS??


LEER URL JS

[Alexis88]

O para que no te compliques más, toma al elemento por el inicio de su identificador:

Código Javascript:

document.querySelector("[id^=menucv]").style.propiedad = valor;
 

Un saludo

[bichomen]

Código HTML:

<script type="text/javascript">

	function getUrlVars()
	{
	    var vars = [], hash;
	    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	    for(var i = 0; i < hashes.length; i++)
	    {
	        hash = hashes[i].split('=');
	        vars.push(hash[0]);
	        vars[hash[0]] = hash[1];
	    }
	    return vars;
	}	
	
	window.onload = getUrlVars();
	var first = getUrlVars()["valor"];	
	var menucv = "menucv" + first;
	
	document.getElementById("menucv").style.backgroundColor = "#5677FC";
   document.getElementById("menucv").style.borderStyle = "inset";
   /*document.querySelector("[id^=menucv]").style.backgroundColor = "#5677FC";
   document.querySelector("[id^=menucv]").style.borderStyle = "inset";*/
	
</script> 

Con lo que me comenta ZedGe1505 ya me devuelve bien la variable menucv, pero no hace nada, el estilo de la caja no cambia, he probado lo de Alexis88 y tampoco.

No se si tendrá que ver, pero esta página la cargo a través de un iframe y se encuentra dentro de una carpeta, no en la raíz.


bichomen

[ZedGe1505]

Es un poco difícil ver el error sin todo el código, prueba pasando la URL en bruto para ver si es ese el problema o no.

También puedes usar el depurador de chrome Ctrl+MAYUS+I, muchas veces te muestra el problema en la consola.

[bichomen]

Iniciado por ZedGe1505

También puedes usar el depurador de chrome Ctrl+MAYUS+I, muchas veces te muestra el problema en la consola.

Gracias, el error que aparece cuando cliclo en algunas de los enlaces es este:

Uncaught TypeError: Cannot read property 'style' of null

Osea como si en:

document.getElementById(menucv).style.backgroundCo lor = "#5677FC";

hubiese algo mal o no le llegase la variable.


bichomen

[ZedGe1505]

Claro es por que tienes

Código Javascript:

document.getElementById("menucv").style.backgroundColor = "#5677FC";
 

Estas diciendo que busque un elemento con id "menucv" y tu no tienes ese elemento..
Debes sacarle las comillas si quieres que tome tu variable

[Alexis88]

Seguramente tienes el script en la cabecera del documento, por lo que termina de cargar antes de que aparezca el elemento y por lo tanto no lo afecta. Coloca el script al final del documento, justo antes de la etiqueta </body> o envuelve todo el código dentro de esto:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    //El código
}, false);
 

Así se ejecutará el script luego de que hayan cargado todos los elementos del documento.

Un saludo

[bichomen]

Iniciado por ZedGe1505

Claro es por que tienes

Código Javascript:

document.getElementById("menucv").style.backgroundColor = "#5677FC";
 

Estas diciendo que busque un elemento con id "menucv" y tu no tienes ese elemento..
Debes sacarle las comillas si quieres que tome tu variable

Ya de eso ya me di cuenta, ahora he probado de 2 formas:

Código HTML:

document.getElementById(menucv).style.backgroundColor = "#5677FC";

document.menucv.style.backgroundColor = "#5677FC";

Las 2 formas me devuelven el error:

Código:

Uncaught TypeError: Cannot read property 'style' of undefined

bichomen

[bichomen]

Iniciado por Alexis88

Seguramente tienes el script en la cabecera del documento, por lo que termina de cargar antes de que aparezca el elemento y por lo tanto no lo afecta. Coloca el script al final del documento, justo antes de la etiqueta </body> o envuelve todo el código dentro de esto:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    //El código
}, false);
 

Así se ejecutará el script luego de que hayan cargado todos los elementos del documento.

Un saludo

Pues he probado las 2 opciones, ponerlo al final o meter la función que me indicas y tanto una cosa como la otra me hace una cosa muy rara, solo funciona con el 3 elemento con el resto no hace nada.


bichomen

[bichomen]

Ya funciona, he quitado un alert() y ha empezado a funcionar sin problemas. Gracias a los 2


bichomen