JavaScript - Mostrar el numero sobre el que se ha puslado

 
Vista:
sin imagen de perfil
Val: 5
Ha disminuido su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar el numero sobre el que se ha puslado

Publicado por PepitoIV (3 intervenciones) el 14/02/2020 09:35:21
Hola a todos, estoy aprendiendo js, con unos cuantos ejercicios, en uno me pide que muestre los números de un contenedor en un alert() con una sola funcion, no sé como seleccionar lo que yo pulse
Investigue que una propiedad target te dice lo que pulses.
hasta ahora se me ha ocurrido hacer esto, pero no se a que elemento agregarle el evento 'click', también se me ocurre con mouseover, pero tiene que ser con click
No se como orientarlo
Se podría hacer esto con funciones flechas ?
Alguien me podría ayudar a como orientarlo.

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
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="es">
 
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
 
<body>
  <main>
    <div id="contenedor">
      <b>1</b>
      <b>2</b>
      <b>3</b>
      <b>4</b>
      <b>5</b>
      <b>6</b>
      <b>7</b>
      <b>8</b>
      <b>9</b>
    </div>
    <div>
  </main>
  <script>
    //Mostrar los numeros con un alert al pulsar sobre ellos con una sola funcion
      function seleccionarNumero(e) {
        document.addEventListener('click', function(e){alert(e.target)});
 
      }
 </script>
</body>
 
</html>
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 joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar el numero sobre el que se ha puslado

Publicado por joel (895 intervenciones) el 14/02/2020 11:28:14
No se muy bien que quieres conseguir, pero si quieres conseguir unicamente el valor del contenido de las <b> tendrias que crear un evento para cada uno de ellos... 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
26
27
28
29
<!DOCTYPE html>
<html lang="es">
 
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
 
<body>
  <main>
    <div id="contenedor">
      <b>1</b>
      <b>2</b>
      <b>3</b>
      <b>4</b>
      <b>5</b>
      <b>6</b>
      <b>7</b>
      <b>8</b>
      <b>9</b>
    </div>
    <div>
  </main>
  <script>
    document.querySelectorAll("b").forEach (el => el.addEventListener('click', function(e){alert(this.innerHTML)}));
 </script>
</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: 5
Ha disminuido su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar el numero sobre el que se ha puslado

Publicado por PepitoIV (3 intervenciones) el 14/02/2020 11:51:20
Muchas gracias por tu respuesta, agregar a cada elemento un evento era lo mejor ,pensé que habría alguna forma de saber lo que estas pulsando sin necesidad de agregar eventos a todos los elementos, creía que había alguna forma de detectar lo que pulsas sin dar eventos
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 joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar el numero sobre el que se ha puslado

Publicado por joel (895 intervenciones) el 14/02/2020 13:07:22
Si, hay la manera...

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
27
28
29
<!DOCTYPE html>
<html lang="es">
 
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
 
<body>
  <main>
    <div id="contenedor">
      <b>1</b>
      <b>2</b>
      <b>3</b>
      <b>4</b>
      <b>5</b>
      <b>6</b>
      <b>7</b>
      <b>8</b>
      <b>9</b>
    </div>
    <div>
  </main>
  <script>
    document.getElementById("contenedor").addEventListener('click', function(e){alert(e.target.innerHTML)});
 </script>
</body>
 
</html>

Pero si pulsas en medio de dos números, te mostrara el contenido del <div>
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 ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar el numero sobre el que se ha puslado

Publicado por ScriptShow (692 intervenciones) el 15/02/2020 15:20:24
Saludos,

una opción 100% compatible con tod@s, sería:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
 
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<b>1</b>
<b>2</b>
<b>3</b>
<b>4</b>
<b>5</b>
<b>6</b>
<b>7</b>
<b>8</b>
<b>9</b>
<script>
//Mostrar los numeros con un alert al pulsar sobre ellos con una sola funcion
var test=document.querySelectorAll("B");
for(var i=0;i<test.length;i++){test[i].onclick=function(){alert(this.innerHTML)}}
</script>
</body>
</html>

Espero sea útil.
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 ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar el numero sobre el que se ha puslado

Publicado por ScriptShow (692 intervenciones) el 15/02/2020 18:28:34
Saludos,

por si interesa cómo sería hace casi 20 años... Igual de compatible hasta hoy. Veamos:

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
27
<!DOCTYPE html>
 
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function test(event){
var target=event.target || event.srcElement;
if (target && target.nodeName.toLowerCase()=="b"){alert(target.innerHTML)}
}
</script>
</head>
<body>
<div onclick="test(event)">
<b>1</b>
<b>2</b>
<b>3</b>
<b>4</b>
<b>5</b>
<b>6</b>
<b>7</b>
<b>8</b>
<b>9</b>
</div>
</body>
</html>

Espero sea úitl.
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