Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: cristiannd en 27 de Abril 2020, 22:59
-
Solución propuesta para el ejercicio CU01140E del tutorial de programación JavaScript con ejercicios resueltos de aprenderaprogramar.
Crea una página web donde inicialmente exista un div con borde solid y ancho delimitado con el texto “Curso JavaScript aprenderaprogramar.com”. Debajo del div deben mostrarse dos botones o pulsadores. Un botón debe indicar “Añadir al final” y otro “Anidar”. Cuando se pulse el botón “Añadir al final”, debe añadirse un div al final de la página con el texto “Nodo creado 1” (o Nodo creado 2, 3, 4… según corresponda). Cuando se pulse el botón “Anidar” debe añadirse un div dentro del div inicial con el texto “Nodo creado 5” (o Nodo creado 6, 7, 8… según corresponda). La numeración será única, es decir, podremos saber en qué orden han sido creados los div estén dentro o fuera del div inicial.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio CU01140E</title>
<style>
body {
font-family: sans-serif;
text-align:center;
}
div {
border: solid black 1px;
background-color: burlywood;
width: 200px;
height: 50px;
margin: 10px;
padding: 10px;
}
</style>
<script>
var contador = 0;
var contadorDivAnidado = 0;
// div al final de la página con el número correspondiente
function añadirAlFinal(){
var divHijo = document.createElement('div');
document.body.appendChild(divHijo);
divHijo.textContent = 'Nodo N° ' + contador;
contador = contador + 1;
}
// div dentro del div inicial con el número correspondiente
function anidar(){
var divPadre = document.getElementById('div'+contadorDivAnidado); // busco el div principal
var nuevoDiv = document.createElement('div'); // creo la variable div
nuevoDiv.id = 'div'+(contadorDivAnidado+1); // le asigno un id con el número siguiente
nuevoDiv.textContent = 'Nodo N°' + contador;
divPadre.appendChild(nuevoDiv);
contador = contador + 1;
contadorDivAnidado = contadorDivAnidado + 1;
}
</script>
</head>
<body>
<div id="div0">
Curso JavaScript aprenderaprogramar.com
</div>
<input type="button" value="Añadir al final" onclick="añadirAlFinal()">
<input type="button" value="Anidar" onclick="anidar()">
</body>
</html>
-
Buenas, este ejercicio está bien resuelto pero haría dos observaciones:
- En general conviene evitar usar la eñe para dar nombre a variables o funciones. Por ello solemos recomendar formas como annadirAlFinal en lugar de añadirAlFinal
- La visualización que obtengo al ejecutar hace que se vean los nodos superpuestos y no se ve bien
En este otro enlace dejo una solución donde los nodos se visualizan correctamente sin superponerse: https://aprenderaprogramar.com/foros/index.php?topic=3926.msg16671#msg16671
Esta solución también aplica una lógica diferente que puede ser interesante revisar.
Salu2