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:
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
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
0
