Uncaught SyntaxError: Unexpected token <

00israel · #1 (**permalink**) 28/05/2014, 02:07

Hola a todos, estoy haciendo una prueba porque todos los script que intento enlazar en un proyecto me están dando problemas.

Entonces me he puesto a hacer una prueba sencilla y veo que en esta prueba también me da problemas.

Me muestra el siguiente error en la linea 1, en la consola del chorme y ademas no se activa el script (es un simple menu desplegable):

Uncaught SyntaxError: Unexpected token <

el HTML:

Código HTML:

<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>prueba</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="script.js"></script>
	<style>
		body {
			padding: 0;
			margin: 0;
			font-family: helvetica;
		}
		.nav {
			background:#333;
			text-decoration: none;
			color: white;
			margin: 0;
			text-align: center;
		}
		nav li{

			display:inline-block;

		}

		nav li a {
			text-decoration: none;
			font-size: 40px;
			color:white;
		}

		@media (max-width: 600px) {

			.nav li{
				display:block;
				text-align: left;
			}

			.navbtn{
				display: block;
				background-color: #333;
				color: white;
				font-size: 40px;
				cursor:pointer;
			}

			.navbtn:before{
				content: 'Menu';
			}
		}
	</style>

</head>
<body>

			<nav>
				<span class="navbtn"></span>
				<ul class="nav">
					<li><a href="/clasesdeacordeon.html">CLASES</a></li>
					<li><a href="/escueladeacordeon.html">ESCUELA</a></li>
					<li><a href="/ventadeacordeones.html">VENTA</a></li>
					<li><a href="/contacto.html">CONTACTO</a></li>
				</ul>
			</nav>
</body>

</html>

Y el script:

Código:

<script>
$('span.navbtn').click(function (){

		$('ul.nav').toggle();
	})
</script>

Por otro lado Aprovecho para preguntaros si yo quitara la class al ul, como lo llamaria desde el script?. Ahora le llamo con $('ul.nav') pero si le quito la class, como lo llamo? he probado con $('ul nav') pero no va, no me vale $('ul') porque en el proyecto real tengo mas de un ul.

gracias

00israel · #2 (**permalink**) 28/05/2014, 02:27

vale acabo de darme cuenta de una cosa, estaba atontado, estaba metiendo dentro del js <script></script>, pero lo he quitado y ahora no me da ningún error pero no me funciona el desplegable.

00israel · #3 (**permalink**) 28/05/2014, 02:33

Vale he dado otro paso mas, he conseguido que me funcione pero solo si coloco las dos lineas de script justo despues del nav, en lugar de en el head, es decir así:

Código:

<nav>
				<span class="navbtn"></span>
				<ul class="nav">
					<li><a href="/clasesdeacordeon.html">CLASES</a></li>
					<li><a href="/escueladeacordeon.html">ESCUELA</a></li>
					<li><a href="/ventadeacordeones.html">VENTA</a></li>
					<li><a href="/contacto.html">CONTACTO</a></li>
				</ul>
			</nav>
			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
			<script src="script.js"></script>

Porque? no puedo ponerlo en el head, que me aclaro mejor?

Alexis88 · #4 (**permalink**) 28/05/2014, 03:09

Eso sucede porque cuando colocas tu archivo JS en la cabecera, el código que tiene se carga antes de cargarse los elementos del documento, por lo que todas las funciones que escribiste ya no surten efecto. En cambio, cuando cargan primer los elementos y luego el código JS, entonces sí se produce el efecto deseado ya que el código está afectando a elementos existentes, pues cuando estos todavía no cargan, es como si no existieran (por decirlo de una manera).

Saludos

00israel · #5 (**permalink**) 28/05/2014, 03:10

gracias Alexis.

Y con respecto a lo que comento de quitar la class al ul?

Alexis88 · #6 (**permalink**) 28/05/2014, 09:31

Como tienes más de una lista desordenada (dígase <ul>) y pretendes afectar a una en particular, asígnale un id e invócala por dicho dato.

Saludos