Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Obtener el texto de un elemento con javascript

JavaScript - Obtener el texto de un elemento con javascript

Volver
Nuevo Tema
<<>>
 
Vista:

Obtener el texto de un elemento con javascript

Publicado por Daniel (2 intervenciones) el 23/03/2021 01:38:03
Hola, necesito obtener el texto de un elemento h1 que es “hermano” de un botón ya que ambos están dentro de un DIV, la novedad es que debo hacer con javascript porque los tres elementos se crean posteriormente a una consulta a la base de datos (por cada linea del resultado de la consulta a la bd se creará un conjunto de esos 3 elementos), entonces he intentado hacerlo utilizando el siguiente código (suponiendo que el botón lo asigné a una variable llamada “button_realizado” y esperando que el “alert” muestre el contenido de su hermano “h1”):

1
2
3
button_realizado.addEventListener("click",function() {
    alert(event.target.parentNode.textContent);
});

Es decir, ubico el elemento (DIV)padre del h1 y del botón presionado y extraigo el texto contenido, el problema es que me muestra no sólo el contenido del h1 sino que se concatena con el text Content del botón, por ejemplo, si el h1 contiene “Localidad1” y el botón tiene por nombre “Realizado” obtendría en el alert “Localidad1Realizado” cuando sólo necesito “Localidad1”. Supongo que esto ocurre porque ambos elementos son “hijos” del DIV (elemento padre). Una solución que le encontré es utilizar “firstChild”, sin embargo, he leído que no funciona igual en todos los navegadores. ¿Alguien tiene alguna otra idea para obtener el texto del h1 sin obtener el textContent del botón y me la puede compartir por favor?

Gracias.

Daniel
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

Obtener el texto de un elemento con javascript

Publicado por joel (895 intervenciones) el 23/03/2021 08:49:23
Hola Daniel, puedes mostrar la estructura del HTML? para poder probarlo?
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

Obtener el texto de un elemento con javascript

Publicado por Daniel (2 intervenciones) el 24/03/2021 00:48:04
Hola Joel, aquí el código (simplificado para la pregunta):
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
    user-scalable=no, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <title>Pruebas</title>
 
 
    <style type="text/css">
        #caja1 { background: grey; display: flex }
        .caja_media { background : blue; margin: 5px;text-align: center }
    </style>
 
</head>
<body>
    <div id="caja1">
 
 
    </div>
 
 
 
    <script>
    var box1 =document.getElementById('caja1');
 
    //AQUI PUSE UN for PARA REALIZAR LA PREGUNTA A USTEDES
    // PERO ESTO EN REALIDAD SE PRODUCE LUEGO DE UNA CONSULTA
    // A BASE DE DATOS
     for (var i = 0; i < 5; i++) {
 
        var nueva_caja = document.createElement('DIV');
        var nueva_etiqueta = document.createElement('h1');
        nueva_etiqueta.textContent=i;
        var boton_realizado=document.createElement('button');
        box1.appendChild(nueva_caja);
        nueva_caja.appendChild(nueva_etiqueta);
        boton_realizado.textContent='Realizado';
        nueva_caja.appendChild(boton_realizado);
        nueva_caja.className='caja_media';
        nueva_etiqueta.className='etiqueta_codigo';
              boton_realizado.className='realizado';
      }
        </script>
 
 
    <script>
 
    //CUANDO SE PRESIONA EL BOTON "REALIZADO"
 
    var botones_realizado = document.getElementsByClassName("realizado");
 
 
    for (var i=0; i< botones_realizado.length; i++) {
        //SE AÑADE UNA "ID" A CADA BOTON DE LA CLASE "realizado"
        botones_realizado[i].addEventListener("click",function() {
           //AQUI ES DONDE ESTA SIGUIENTE LINEA DE CODIGO ME CONCATENA
           //EL TEXTO DEL H1 CON EL TEXTO DEL BOTON Y SOLO NECESITO
           //EL CONTENIDO DEL H1
           alert(event.target.parentNode.textContent);
        });
    }
    </script>
 
 
</body>
</html>

Recuerda que con firstChild se puede solucionar pero me gustaría saber si hay alguna otra alternativa.
Gracias.
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

Obtener el texto de un elemento con javascript

Publicado por joel (895 intervenciones) el 24/03/2021 08:16:43
Hola Daniel, gracias por mostrarlo...
En vez de utilizar parentNode, tienes que utilizar previousElementSibling algo así:
1
alert(event.target.previousElementSibling.textContent);
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