Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Problema con uso de eventos en documento HTML5

JavaScript - Problema con uso de eventos en documento HTML5

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 6
Ha disminuido su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con uso de eventos en documento HTML5

Publicado por Denis (3 intervenciones) el 09/01/2018 21:13:42
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel=StyleSheet href="newCascadeStyleSheet.css" type="text/css" media=screen>
        <script>
            document.getElementById("priPri").onclick = function () {
                document.getElementsByClassName("secPriPri").style.display = "block";
            };
        </script>
    </head>
...

Tal script no funciona, los elementos "secPriPri" deberían de volver a ser visibles.
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
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con uso de eventos en documento HTML5

Publicado por xve (2100 intervenciones) el 10/01/2018 06:47:32
Hola Denis, cuando se generas el evento, todavia no se ha cargado el div con el id "priPri", por lo que no te funcionara... tienes que generar el evento una vez se haya cargado la pagina... algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel=StyleSheet href="newCascadeStyleSheet.css" type="text/css" media=screen>
        <script>
	        document.onload = function() {
	            document.getElementById("priPri").onclick = function () {
	                document.getElementsByClassName("secPriPri").style.display = "block";
	            };
			};
        </script>
    </head>
...
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
sin imagen de perfil
Val: 6
Ha disminuido su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con uso de eventos en documento HTML5

Publicado por Denis (3 intervenciones) el 10/01/2018 18:34:04
No me funciona. Te adjunto también el CSS aunque no creo que tenga que ver.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <title>Pruebas HTML</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel=StyleSheet href="newcss.css" type="text/css" media=screen>
        <script>
            document.onload = function () {
                document.getElementById("nombreDeLista").onclick = function () {
                    document.getElementsByClassName("tiposDeFrutas").style.display = "block";
                };
            };
        </script>
    </head>
    <body>
        <div id="nombreDeLista">Frutas</div>
        <div class="tiposDeFrutas">Pera</div>
        <div class="tiposDeFrutas">Limón</div>
    </body>
</html>
____________________

1
2
3
.tiposDeFrutas {
    display: none;
}
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
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con uso de eventos en documento HTML5

Publicado por xve (2100 intervenciones) el 10/01/2018 19:47:23
Disculpame Denis, en vez de document es window... fallo mio!!!

Ahora que he probado el código, no te funcionara, ya que
1
document.getElementsByClassName("tiposDeFrutas")
devuelve un array de valores...

Tendrás que hacer algo 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
<!DOCTYPE html>
<html>
    <head>
        <title>Pruebas HTML</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel=StyleSheet href="newcss.css" type="text/css" media=screen>
        <script>
            window.onload = function () {
                document.getElementById("nombreDeLista").onclick = function () {
                    elementos=document.getElementsByClassName("tiposDeFrutas")
                    for(var i=0;i<elementos.length;i++)
                    {
	                    elementos[i].style.display = "block";
	                }
                };
            };
        </script>
    </head>
    <body>
        <div id="nombreDeLista">Frutas</div>
        <div class="tiposDeFrutas">Pera</div>
        <div class="tiposDeFrutas">Limón</div>
    </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
sin imagen de perfil
Val: 6
Ha disminuido su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con uso de eventos en documento HTML5

Publicado por Denis (3 intervenciones) el 10/01/2018 20:07:11
Sí, ya funciona, perfecto.
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