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: Salvadoruve2 en 09 de Julio 2016, 14:56
-
Hola.. después de varias vueltas y gracias a la ayuda de los moderadores, he conseguido sacar una solución al problema propuesto ejercicio CU01140E del tutorial básico de programación web JavaScript desde cero.
Seguro que es mejorable y me gustaría recibir opiniones de como hacerlo mejor. De hecho ahora me propondré a mirar otros ejercicios resueltos
Espero que os sirva.
<!DOCTYPE html>
<html>
<head>
<title>My div</title>
<meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center; margin-top: 50px;}
#añadirID, #anidarID {padding:15px; width: 130px; margin: 0 auto; color: white; border-radius: 40px; background: rgb(202, 60, 60); cursor: pointer;}
#añadirID:hover, #anidarID:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
contador = 1;
function introducirDiv(action) {
if (action == 'añadir') {
var nodoHijo = document.createElement("div");
nodoHijo.textContent = "Nodo creado " + contador;
nodoHijo.style.borderStyle = "solid";
nodoHijo.style.width = "500px";
nodoHijo.style.marginLeft = "450px";
nodoHijo.style.marginTop = "50px";
nodoHijo.style.background = "#F5DA81";
document.body.appendChild(nodoHijo);
contador = contador +1;
}
else {
var nodoLarva = document.createElement("div");
nodoLarva.textContent = "Nodo creado" + contador;
var probeta = document.getElementById('paciente');
probeta.appendChild(nodoLarva);
nodoLarva.style.borderStyle = "solid";
nodoLarva.style.margin = "30px";
nodoLarva.style.background = "#81BEF7";
nodoLarva.style.padding = "25px";
nodoLarva.style.display ="inline-block";
contador = contador +1;
}
}
</script>
</head>
<body>
<div id="paciente" style="border-style:solid; margin: 30px; padding:25px; display:inline-block">Curso de Javascript aprendeaprogramar.com</div>
<br><br><br>
<div style="width: 500px; display:inline-block; margin-left:170px">
<div id="añadirID" style="float:left" onclick="introducirDiv('añadir')">Añadir al final</div>
<div id="anidarID" onclick="introducirDiv('anidar')">Anidar</div>
</div>
</body>
</html>
Por ejemplo me gustaría saber de que mejor forma puedo dar estilos css a los elementos de nueva creación que no sea uno por uno.
Gracias
-
Hola Salvador.
El ejercicio está bien resuelto.
Podrías tener creado el estilo y cuando creas el nodo, asignarle un id o clase.
Te dejo una alternativa a tu solución que creo que resolverá alguna de tus dudas.
También es aconsejable evitar usar la letra "ñ" en nombres de variables, funciones, id, etc.
Saludos. ;D
-
Gracias por las anotaciones, las tendré muy en cuenta...
Lo que no entiendo es como le puedo añadir una Id al div desde "var nodoHijo = document.createElement("div");"
Por cierto no he podido ver la propuesta que me ibas a adjuntar.
Saludos
-
Buenas, un hilo con comentarios interesantes sobre este ejercicio es https://www.aprenderaprogramar.com/foros/index.php?topic=3926.0
Salu2