JavaScript - Como evitar que siga saliendo "undefined" al crear elementos con DOM

 
Vista:

Como evitar que siga saliendo "undefined" al crear elementos con DOM

Publicado por Ricardo Hung (1 intervención) el 07/08/2020 22:34:41
JS:

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
'use strict'
 
window.addEventListener('load', () => {
 
    var form = document.querySelector('#etiqueta_form');
    var nombre = document.querySelector('#nombre');
    var apellidos = document.querySelector('#apellidos');
    var edad = document.querySelector('#edad');
 
    const placeHolers = (variable, texto) => (variable.placeholder = `Ingrese ${texto}`);
 
    placeHolers(nombre, 'nombre');
    placeHolers(apellidos, 'apellidos');
    placeHolers(edad, 'edad');
 
    const creacion_de_encabezados = (texto_encabezado, divX) => {
        var etiqueta = document.createElement('h4');
        var text_etiqueta = document.createTextNode(texto_encabezado);
        etiqueta.append(text_etiqueta);
        divX.prepend(etiqueta);
    }
    const creacion_divs = (variable, texto) => {
        var div = document.createElement('div');
        var text = creacion_de_encabezados(texto, div);
        div.prepend(text);
        div.append(variable);
        form.append(div);
    }
 
    creacion_divs(nombre, 'Nombre');
    creacion_divs(apellidos, 'Apellidos');
    creacion_divs(edad, 'Edad');
 
})

HTML:
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
<!DOCTYPE html>
<html lang="es">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ejercicio DOM, eventos y funciones</title>
  <script type="text/javascript" src="JS/32-ejercicio-DOM.js"></script>
</head>
 
<body>
 
  <!--
        1. Formulario campos: nombre, apellidos y edad.
        2. Boton de enviar el formulario: evento submit.
        3. Mostrar los datos por pantalla.
        4. Tener un boton que al darle click nos muestre los datos actuales del formulario.
     -->
 
  <h1>Ejercicio DOM, eventos y funciones</h1>
 
  <form id="etiqueta_form">
 
    <input type="text" name="nombre" id="nombre">
    <input type="text" name="apellidos" id="apellidos">
    <input type="text" name="edad" id="edad">
 
    <input type="submit" name="enviar" id="enviar">
  </form>
</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: 2.504
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como evitar que siga saliendo "undefined" al crear elementos con DOM

Publicado por joel (538 intervenciones) el 08/08/2020 08:47:12
Hola Ricardo, el problema lo tienes en la linea 24 y 25

la función creacion_de_encabezados() no devuelve nada, por lo tanto devuelve undefined, y tu lo añades al div en la linea 25.

Simplemente elimina la linea 25, y modifica la linea 24 para que quede así:
1
creacion_de_encabezados(texto, 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

Como evitar que siga saliendo "undefined" al crear elementos con DOM

Publicado por Ricardo Hung (1 intervención) el 09/08/2020 05:19:48
Muchas gracias, me di cuenta antes de la respuesta, pero te lo agradezco muchisimo.
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