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: javaquery en 26 de Noviembre 2016, 15:50
-
Buenas
Tengo un problema en este ejercicio
2.1 Cuando se clique sobre #addDiv se cree un DIV, se pida al usuario un texto y se añada dentro de #domNodes con el texto indicado por el usuario. A demás el nuevo DIV creado debe ser de la clase .addDiv.
El problema lo tengo cuando dice que el nuevo DIV se añada dentro de #domNodes
Aqui el codigo HTML
<!DOCTYPE html>
<!--
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="dom.js" type="text/javascript"></script>
<link rel="stylesheet" href="./dom.css" type="text/css">
</head>
<body onload ="inicio()">
<article class="article_main_web">
<header class="header_article">
<hgroup>
<h2>DOM!!</h2>
</hgroup>
</header>
<nav id="selectOperation">
<div id="addDiv" onclick = "añadirDiv()"> NEW ADD DIV </div>
<div id="addSpan"> NEW ADD SPAN </div>
<div id="setContentPrev"> NEW DIV SET CONTENT PREVIOUS ELEMENT </div>
<div id="delPrevNode"> NEW DIV DELETE PREVIOUS ELEMENT </div>
<div id="delNextNode"> NEW DIV DELETE NEXT ELEMENT </div>
<div id="addAttr"> NEW DIV SET ATTRIBUTE</div>
<div id="delAllType"> NEW DIV REMOVE ALL TYPE </div>
<div id="replaceMeForFirst"> NEW DIV REPLACE ME </div>
</nav>
<h3>!!ADD DIVS !!</h3>
<section id="domNodes">
</section>
</article>
</body>
</html>
y aqui el codijo css
[code]
#selectOperation>div{
vertical-align: middle;
border: 1px solid #99CCFF;
display: inline-block;
margin: 5px;
min-height: 30px;
min-width: 75px;
padding:2px;
padding-top: 4px;
vertical-align: middle;
cursor: pointer;
}
#selectOperation>div:hover{
box-shadow: -1px 0 10px #99CCFF;
}
#domNodes{
border:1px solid yellow;
}
#domNodes h3{
text-align: center;
}
#domNodes>div{
border:1px solid yellow;
margin: 5px;
min-height: 50px;
width: 75px;
display:inline-block;
vertical-align: top;
}
#domNodes> span{
border:1px solid red;
margin: 5px;
min-height: 30px;
min-width: 30px;
display:inline-block;
vertical-align: top;
}
#domNodes{
vertical-align: top;
}
.addDiv{
border-color: #F8AC00;
border-radius: 15%;
}
.addSpan{
border-color:#008000;
background-color: #ADFF2F;
}
.setContentPrev{
border-color:#FFCC99;
}
.delPrevNode{
border-color:#A9ED86;
}
.delNextNode{
border-color:#ADFF2F;
}
.addAttr {
border-color:red;
}
.delAllType{
border-color:#9966FF;
}
.replaceMeForFirst {
background-color: sandybrown;
}
y aqui el codigo javascript
document.addEventListener("load", inicio,false);
function inicio() {
}
function añadirDiv(){
var newDiv = document.createElement("div");//creo el nodo del tipo element //
var newTexto= prompt("introduzca un texto");
newTexto= document.createTextNode(newTexto); //creo nodo de tipo text//
document.getElementById("domNodes").innerHTML = newTexto;
}
-
Hola javimf.
Prueba con esto...
function añadirDiv(){
var nodoPadre = document.getElementById('domNodes');
var newDiv = document.createElement("div");//creo el nodo del tipo element //
var newTexto= prompt("introduzca un texto");
newDiv.className = 'addDiv';
newDiv.innerHTML = newTexto;
nodoPadre.appendChild(newDiv);
}
Espero que te valga.
También recomendarte que intentes no usar la "ñ" en nombres de variables, funciones, archivos, etc., por problemas de compatibilidad.
Saludos. ;D
-
Gracias , lo tenia ya casi terminado
ahora me ha surgido otra duda, en este
2.3 Cuando se clique sobre el div #setContentPrev se cree un DIV con el texto ‘setContentPrev’ y de la clase .setContentPrev que se añada dentro de #domNodes. A demás, al clicar encima el DIV creado se deberá llamar a una función que pida un texto al usuario y lo introduzca dentro del elemento hermano anterior al creado.
Me funciona la parte que crea el div y el texto y lo añade , pero lo demas no, adjunto mi codigo
function addDiv() {
var nodoPadre = document.getElementById("domNodes");
var newDiv = document.createElement("div"); /*creo el div*/
document.getElementById("domNodes").innerHTML = "<div> setContentPrev </div>"; /*añado el texto con el div en domNodes*/
newDiv.class = 'setContentPrev'; /*div de la clase 'setContentPrev' */
nodoPadre.appendChild(newDiv);
newDiv.addEventListener("click", addText, false); /*añado un evento para que al clicar sobre el div se ejecute la funcion*/
function addText(evento) {
var miDiv = evento.target; /*utilizo evento target para acceder al elemento que ha ejecutado la funcion*/
var divAnterior = miDiv.previousSibling;
var newTexto = prompt("introduzca un texto");
var parrafo = document.createElement("p"); /* creo un elemento del tipo <p> */
var texto = document.createTextNode(newTexto);
parrafo.appendChild(texto);
divAnterior.appendChild(parrafo);
}
}
-
Hola, te dejo una posible solución:
function addDiv() {
var nodoPadre = document.getElementById("domNodes");
var newDiv = document.createElement("div"); /*creo el div*/
newDiv.className = 'setContentPrev'; /*div de la clase 'setContentPrev' */
nodoPadre.appendChild(newDiv);
newDiv.addEventListener("click", addText, false); /*añado un evento para que al clicar sobre el div se ejecute la funcion*/
function addText(evento) {
var miDiv = evento.target; /*utilizo evento target para acceder al elemento que ha ejecutado la funcion*/
var divAnterior = miDiv.previousSibling;
if(miDiv.previousElementSibling){
var newTexto = prompt("introduzca un texto");
divAnterior.innerHTML = newTexto;
} else {
alert('No extiste div hermano anterior');
}
}
}
Saludos. ;D
-
Hola
Lo hecho pero no me funciona, no me pide el texto , en el HTMl he puesto la llamada a la funcion , no se si hay estara el problema
<div id="setContentPrev" onclick="addDiv(); addText()"> NEW DIV SET CONTENT PREVIOUS ELEMENT </div>
-
Según lo resolví, cuando creas el primer nodo div, no te pide que introduzcas el texto porque todavía no existe un nodo div hermano anterior, si lo intentas cuando creas el segundo div, entonces si te pedirá que introduzcas el texto y se lo colocará al div anterior.
y la línea que indicas déjala de la siguiente forma:
<div id="setContentPrev" onclick="addDiv()"> NEW DIV SET CONTENT PREVIOUS ELEMENT </div>
porque desde addDiv() ya llamas a la función addText()
-
Pues algo estare haciendo mal, porque no hay manera de que me lo pida
-
Pero cuando te refieres a otro div te refieres al mismo div del ejercicio, o de otros ejercicios anteriores? lo que si veo es que cuando creo un div del punto primero o un span, y luego ejecuto este , los borra los anteriores
-
Yo lo probré con este código:
<!DOCTYPE html>
<!--
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#selectOperation>div{
vertical-align: middle;
border: 1px solid #99CCFF;
display: inline-block;
margin: 5px;
min-height: 30px;
min-width: 75px;
padding:2px;
padding-top: 4px;
vertical-align: middle;
cursor: pointer;
}
#selectOperation>div:hover{
box-shadow: -1px 0 10px #99CCFF;
}
#domNodes{
border:1px solid yellow;
}
#domNodes h3{
text-align: center;
}
#domNodes>div{
border:1px solid yellow;
margin: 5px;
min-height: 50px;
width: 75px;
display:inline-block;
vertical-align: top;
}
#domNodes> span{
border:1px solid red;
margin: 5px;
min-height: 30px;
min-width: 30px;
display:inline-block;
vertical-align: top;
}
#domNodes{
vertical-align: top;
}
.addDiv{
border-color: #F8AC00;
border-radius: 15%;
}
.addSpan{
border-color:#008000;
background-color: #ADFF2F;
}
.setContentPrev{
border-color:#FFCC99;
}
.delPrevNode{
border-color:#A9ED86;
}
.delNextNode{
border-color:#ADFF2F;
}
.addAttr {
border-color:red;
}
.delAllType{
border-color:#9966FF;
}
.replaceMeForFirst {
background-color: sandybrown;
}
</style>
<script>
function addDiv() {
var nodoPadre = document.getElementById("domNodes");
var newDiv = document.createElement("div"); /*creo el div*/
newDiv.className = 'setContentPrev'; /*div de la clase 'setContentPrev' */
nodoPadre.appendChild(newDiv);
newDiv.addEventListener("click", addText, false); /*añado un evento para que al clicar sobre el div se ejecute la funcion*/
function addText(evento) {
var miDiv = evento.target; /*utilizo evento target para acceder al elemento que ha ejecutado la funcion*/
var divAnterior = miDiv.previousSibling;
if(miDiv.previousElementSibling){
var newTexto = prompt("introduzca un texto");
divAnterior.innerHTML = newTexto;
} else {
alert('No extiste div hermano anterior');
}
}
}
</script>
</head>
<body>
<article class="article_main_web">
<header class="header_article">
<hgroup>
<h2>DOM!!</h2>
</hgroup>
</header>
<nav id="selectOperation">
<div id="addDiv" onclick = "addDiv()"> NEW ADD DIV </div>
<div id="addSpan"> NEW ADD SPAN </div>
<div id="setContentPrev"> NEW DIV SET CONTENT PREVIOUS ELEMENT </div>
<div id="delPrevNode"> NEW DIV DELETE PREVIOUS ELEMENT </div>
<div id="delNextNode"> NEW DIV DELETE NEXT ELEMENT </div>
<div id="addAttr"> NEW DIV SET ATTRIBUTE</div>
<div id="delAllType"> NEW DIV REMOVE ALL TYPE </div>
<div id="replaceMeForFirst"> NEW DIV REPLACE ME </div>
</nav>
<h3>!!ADD DIVS !!</h3>
<section id="domNodes">
</section>
</article>
</body>
</html>
Al pulsar en "NEW ADD DIV" crea un nuevo elemento "div" dentro del elemento "section",
si ahora pulsas sobre el nuevo "div" creado, saltará un "alert" diciendo que "No existe div hermano anterior", así que vuelve a pulsar en "NEW ADD DIV" para crear otro nuevo "div" a continuación del que creamos anteriormente, y ahora al pulsar en este último "div", si nos pedirá que ingresemos un texto, que posteriormente lo incluirá en el "div" anterior.
Vaya lío. ;D
Esta línea es la que comprueba si existe un elemento hermano anterior:
if(miDiv.previousElementSibling){
Espero haberme explicado bien.
-
Este es mi codigo , creo que hay algo mal:
codigo html , el codigo css esta bien.
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="dom.js" type="text/javascript"></script>
<link rel="stylesheet" href="./dom.css" type="text/css">
</head>
<body onload ="inicio()">
<article class="article_main_web">
<header class="header_article">
<hgroup>
<h2>DOM!!</h2>
</hgroup>
</header>
<nav id="selectOperation">
<div id="addDiv" onclick = "añadirDiv()"> NEW ADD DIV </div>
<div id="addSpan" onclick = "añadirSpan()"> NEW ADD SPAN </div>
<div id="setContentPrev" onclick="addDiv()"> NEW DIV SET CONTENT PREVIOUS ELEMENT </div>
<div id="delPrevNode"> NEW DIV DELETE PREVIOUS ELEMENT </div>
<div id="delNextNode"> NEW DIV DELETE NEXT ELEMENT </div>
<div id="addAttr"> NEW DIV SET ATTRIBUTE</div>
<div id="delAllType"> NEW DIV REMOVE ALL TYPE </div>
<div id="replaceMeForFirst"> NEW DIV REPLACE ME </div>
</nav>
<h3>!!ADD DIVS !!</h3>
<section id="domNodes">
</section>
</article>
</body>
</html>
codigo js
document.addEventListener("load", inicio, false);
function inicio() {
}
function añadirDiv() {
var nodoPadre = document.getElementById("domNodes");
var newDiv = document.createElement("div");//creo el nodo del tipo element //
var newTexto = prompt("introduzca un texto"); //guardo el valor del texto en una variable//
newDiv.class = 'addDiv'; //añado el nuevo div de la clase .addDiv//
newDiv.innerHTML = newTexto;
nodoPadre.appendChild(newDiv);
}
function añadirSpan() {
var nodoPadre = document.getElementById("domNodes");
var newSpan = document.createElement("span");// creo el nodo del tipo element//
var newTexto = prompt("introduzca un texto"); //guardo el valor del texto en una variable//
newSpan.class = 'addSpan';// añado el nuevo span a la clase .addSpan//
newSpan.innerHTML = newTexto;
nodoPadre.appendChild(newSpan);
}
function addDiv() {
var nodoPadre = document.getElementById("domNodes");
var newDiv = document.createElement("div"); /*creo el div*/
document.getElementById("domNodes").innerHTML = "<div> setContentPrev </div>"; /*añado el texto con el div en domNodes*/
newDiv.class = 'setContentPrev'; /*div de la clase 'setContentPrev' */
nodoPadre.appendChild(newDiv);
newDiv.addEventListener("click", addText, false); /*añado un evento para que al clicar sobre el div se ejecute la funcion*/
function addText(evento) {
var miDiv = evento.target; /*utilizo evento target para acceder al elemento que ha ejecutado la funcion*/
var divAnterior = miDiv.previousSibling;
if (miDiv.previousElementSibling) {
var newTexto = prompt("introduzca un texto");
divAnterior.innerHTML = newTexto;
} else {
alert("No eixste div hermano anterior");
}
}
}
-
Lo primero, para establecer las clases, estas usando "nombreElemento.class" y tiene que ser "nombreElemento.className"
Luego cuando pulsas sobre "NEW DIV SET CONTENT PREVIOUS ELEMENT" creas dos elementos div cada vez que pulsas, si dejas la función addDiv() como yo te la dejé antes, te irá creando los div de uno en uno.
Mira a ver si con eso te vale.
-
Ahora si me funciona, he puesto bien lo de las clases y lo de la funcion
document.addEventListener("load", inicio, false);
function inicio() {
}
function añadirDiv() {
var nodoPadre = document.getElementById("domNodes");
var newDiv = document.createElement("div");//creo el nodo del tipo element //
var newTexto = prompt("introduzca un texto"); //guardo el valor del texto en una variable//
newDiv.className= 'addDiv'; //añado el nuevo div de la clase .addDiv//
newDiv.innerHTML = newTexto;
nodoPadre.appendChild(newDiv);
}
function añadirSpan() {
var nodoPadre = document.getElementById("domNodes");
var newSpan = document.createElement("span");// creo el nodo del tipo element//
var newTexto = prompt("introduzca un texto"); //guardo el valor del texto en una variable//
newSpan.className = 'addSpan';// añado el nuevo span a la clase .addSpan//
newSpan.innerHTML = newTexto;
nodoPadre.appendChild(newSpan);
}
function addDiv() {
var nodoPadre = document.getElementById("domNodes");
var newDiv = document.createElement("div"); /*creo el div*/
document.getElementById("domNodes").innerHTML = "<div> setContentPrev </div>"; /*añado el texto con el div en domNodes*/
newDiv.className = 'setContentPrev'; /*div de la clase 'setContentPrev' */
nodoPadre.appendChild(newDiv);
newDiv.addEventListener("click", addText, false); /*añado un evento para que al clicar sobre el div se ejecute la funcion*/
function addText(evento) {
var miDiv = evento.target; /*utilizo evento target para acceder al elemento que ha ejecutado la funcion*/
var divAnterior = miDiv.previousSibling;
if (miDiv.previousElementSibling) {
var newTexto = prompt("introduzca un texto");
divAnterior.innerHTML = newTexto;
} else {
alert("No eixste div hermano anterior");
}
}
}
-
Lo que no entiendo es porque en tu html has puesto :
<div id="addDiv" onclick = "addDiv()"> NEW ADD DIV </div>
<div id="addSpan"> NEW ADD SPAN </div>
<div id="setContentPrev"> NEW DIV SET CONTENT PREVIOUS ELEMENT</div>
ese addDiv no deberia ir en el id del setContentPrev, yo lo tengo asi
<div id="addDiv" onclick = "añadirDiv()"> NEW ADD DIV </div>
<div id="addSpan" onclick = "añadirSpan()"> NEW ADD SPAN </div>
<div id="setContentPrev" onclick = "addDiv()"> NEW DIV SET CONTENT PREVIOUS ELEMENT </div>
-
bueno, yo lo puse así porque en un principio solo te ayudaba a crear una parte del código, así que se puede cambiar para que este en su sitio, ten en cuenta que yo solo tenia la función de crear el div, no todo el código que tu tienes. Por eso a lo mejor te he liado un poco.
-
Gracias.
Ahora tengo estos otros
2.4 Cuando se clique sobre #delPrevNode cree un DIV con el texto ‘Remove Preview’, de la clase .delPrevNode y que se añada dentro de #domNodes. A demás al clicar encima se deberá eliminar el nodo elemento anterior. SI no existe nodo anterior, no deberá retornar ningún error ni borrar nada.
2.5 Cuando se clique sobre #delNextNode se cree un DIV con el texto ‘Remove Next’, de la clase .delNextNode y que se añada dentro de #domNodes. A demás al clicar encima el DIV creado se deberá llamar a una función que compruebe si hay un nodo elemento después de él y en tal caso que lo borre.
-
Buenas.
function addDelPrevNode() {
var nodoPadre = document.getElementById("domNodes");
var newDiv = document.createElement("div");//creo el nodo del tipo element //
newDiv.className = 'delPrevNode'; //añado el nuevo div de la clase .delPrevNode//
newDiv.innerHTML = 'Remove Preview';
nodoPadre.appendChild(newDiv);
newDiv.addEventListener("click", removePreviewNode, false);
function removePreviewNode(evento) {
var miDiv = evento.target;
if(miDiv.previousElementSibling){
var divAnterior = miDiv.previousSibling;
nodoPadre.removeChild(divAnterior);
}
}
}
function addDelNextNode() {
var nodoPadre = document.getElementById("domNodes");
var newDiv = document.createElement("div");//creo el nodo del tipo element //
newDiv.className = 'delNextNode'; //añado el nuevo div de la clase .delNextNode//
newDiv.innerHTML = 'Remove Next';
nodoPadre.appendChild(newDiv);
newDiv.addEventListener("click", removeNextNode, false);
function removeNextNode(evento) {
var miDiv = evento.target;
if(miDiv.nextElementSibling){
var divSiguiente = miDiv.nextSibling;
nodoPadre.removeChild(divSiguiente);
}
}
}
El código empieza a alargarse y se repiten muchas líneas, deberías intentar reducirlo.
Saludos. ;D
-
Buenas
Gracias, luego cuando llegue a casa , lo pruebo e intento reducir el codigo :D
-
gracias , todo perfecto
ahora esoty en este:
2.6 Cuando se clique sobre #addAttr se cree un DIV con el texto “Ad done Attr”, de la clase .addAttr y se añada dentro de #domNodes. Al clicar encima del DIV creado se ha de pedir al usuario un nombre de atributo y valor y establecer al elemento clicado el atributo y nombre indicado (si ya tiene un atributo con ese nombre, hay que actualizar su valor).
Y esto es lo que llevo de codigo:
function addAtri (){
var nodoPadre = document.getElementById("domNodes");
var newDiv = document.createElement("div");
newDiv.className = 'addAttr';
newDiv.innerHTML ='Ad done Attr';
nodoPadre.appendChild(newDiv);
var nweAtr = prompt("introduce un nombre de atributo y valor");
newAtr= document.createAttribute("at");
-
Buenas noches.
function addAtri (){
var nodoPadre = document.getElementById("domNodes");
var newDiv = document.createElement("div");
newDiv.className = 'addAttr';
newDiv.innerHTML ='Ad done Attr';
nodoPadre.appendChild(newDiv);
newDiv.addEventListener("click", crearAtributo, false);
function crearAtributo(){
var newAtr = prompt("introduce un nombre de atributo: ");
var valorAtr = prompt("Introduce el valor para el atributo: ");
var atributo = document.createAttribute(newAtr);
atributo.value = valorAtr;
newDiv.setAttributeNode(atributo);
}
}
Saludos. ;D
-
Gracias
ahora tengo este, y llevo esto de codigo
2.7 Cuando se clique sobre #delAllType se cree dentro de #domNodes un DIV con el texto “Delete All Of”, de la clase .delAllType .Al clicar encima del DIV creado se ha de pedir al usuario un tipo de dato (SPAN, DIV...) y se elimine de #domNodes todos aquellos elementos de ese tipo (si es que existe alguno).
function addDelAllType(){
var nodoPadre = document.getElementById("domNodes");
var newDiv = document.createElement("div");
newDiv.className = 'delAllType';
newDiv.innerHTML = 'Delete All Of';
nodoPadre.appendChild(newDiv);
newDiv.addEventListener("click", elimElemento, false);
function elimElemento(){
var newTipo= prompt("introduce un tipo de dato: ");
}
}
-
Buenos dias.
function addDelAllType(){
var nodoPadre = document.getElementById("domNodes");
var newDiv = document.createElement("div");
newDiv.className = 'delAllType';
newDiv.innerHTML = 'Delete All Of';
nodoPadre.appendChild(newDiv);
newDiv.addEventListener("click", elimElemento, false);
function elimElemento(){
var newTipo= prompt("introduce un tipo de dato: ");
var nodosABorrar = nodoPadre.querySelectorAll(newTipo);
console.log(nodosABorrar);
for(var i = 0; i < nodosABorrar.length; i ++) {
nodoPadre.removeChild(nodosABorrar[i]);
}
}
}
Si decimos que se borren los nodos 'div', también se borra el 'div' sobre el que pulsamos. No se si te vale así o habría que omitir dicho 'div'.
Saludos. ;D
-
Buenas
Asi esta bien ;D
Ahora ya estoy con el ultimo, he intentado hacerlo pero me quedo atrancao
2.8 Cuando se clique sobre #replaceMeForFirst se ha de pedir un texto al usuario y crear dentro de #domNodes un DIV con un texto introducido por el usuario y de la clase .replaceMeForFirst. Al clicar encima del DIV creado se ha de situar delante del primer DIV dentro de #domNodes.
function MeForFirst(){
var newTexto = prompt("introduce un texto");
var nodoPadre = document.getElementById("domNodes");
var newDiv= document.createElement("div");
nodoPadre.appendChild(newDiv);
newDiv.innerHTML= newTexto;
newDiv.className = 'replaceMeForFirst';
newDiv.addEventListener("click", primerDiv, false);
function primerDiv(){
}
}
-
Este es más fácil.
function MeForFirst(){
var newTexto = prompt("introduce un texto");
var nodoPadre = document.getElementById("domNodes");
var newDiv= document.createElement("div");
nodoPadre.appendChild(newDiv);
newDiv.innerHTML= newTexto;
newDiv.className = 'replaceMeForFirst';
newDiv.addEventListener("click", primerDiv, false);
function primerDiv(){
nodoPadre.insertBefore(newDiv, nodoPadre.childNodes[0]);
}
}
Saludos. ;D