JavaScript - Cambiar estilos, problema en evento.

   
Vista:
Imágen de perfil de Mario Fernández

Cambiar estilos, problema en evento.

Publicado por Mario Fernández (3 intervenciones) el 27/02/2016 10:44:03
Algo tengo que estar haciendo mal. Os explico:

Tengo dos elementos: <p> y <button>. La historia es que quiero consguir que cuando pulse el boton el elemento <p> quede modificado con ciertos estilos.

Código HTML:
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>ESTILOS JAVASCRIPT</title>
    <script src="estilos.js"></script>
</head>
<body id="principal">
    <p>Este es un texto normal</p>
    <button id="boton">Convertir</button>
</body>
</html>

Código JS:
1
2
3
4
5
6
7
8
9
10
function nuevoestilo()
{
    var elem = document.querySelector("#principal p");
    elem.style.background = "#333333";
    elem.style.border = 1;
    elem.style.margin = 200;
    elem.style.padding = 30;
}
var bot1 = document.getElementById("#boton");
bot1.addEventListener("click",nuevoestilo);

El error debe estar en el elemento click ya que si pongo en el addEventListener el evento load sí que lo carga. Si alguien me puede ayudar... Muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Cambiar estilos, problema en evento.

Publicado por xve (1595 intervenciones) el 27/02/2016 12:41:01
Hola Mario, no he probado tu código pero a simple vista, esto esta erróneo:
1
var bot1 = document.getElementById("#boton");
tiene que ser así:
1
var bot1 = document.getElementById("boton");
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Jordi

Cambiar estilos, problema en evento.

Publicado por Jordi (75 intervenciones) el 27/02/2016 12:41:05
Hola Mario,

Prueba a quitar la almohadilla del getElementById. Te está buscando un id que empiece por almohadilla (id="#boton").
1
var bot1 = document.getElementById("#boton");
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Mario

Cambiar estilos, problema en evento.

Publicado por Mario (3 intervenciones) el 27/02/2016 17:45:01
Lo he modificado y no me realiza la accion de modificar estilo. Estoy seguro que tiene que ser algo muy basico pero no llego a dar. :(
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Cambiar estilos, problema en evento.

Publicado por xve (1595 intervenciones) el 28/02/2016 13:18:45
Hola Mario, tu problema esta en que cargas el archivo js antes de cargar el contenido de la pagina, por lo que todavia no existe el id para generar el evento... prueba así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>ESTILOS JAVASCRIPT</title>
    <script>
    window.onload=function(){
		function nuevoestilo()
		{
			var elem = document.querySelector("#principal p");
			elem.style.background = "#333333";
			elem.style.border = 1;
			elem.style.margin = 200;
			elem.style.padding = 30;
		}
		var bot1 = document.getElementById("boton");
		bot1.addEventListener("click",nuevoestilo);
	}
	</script>
 
</head>
<body id="principal">
    <p>Este es un texto normal</p>
    <button id="boton">Convertir</button>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Mario

Cambiar estilos, problema en evento.

Publicado por Mario (3 intervenciones) el 29/02/2016 09:50:35
Muchas gracias, ¡solucionado!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar