Mostrar Mensajes
41
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Javascript. Modificar contenido web con innerHTML nodeValue textContent CU01138E
« en: 25 de Enero 2017, 19:11 »
Ejercicio CU01138E del curso de JavaScript de aprenderaprogramar.com
He intentado que cada caja se modifique de manera diferente, una con innerHTML, otra con nodeValue, textContent, etc.
No se me ocurre otra manera de utilizar innerHTML sin que me cree un div dentro de su div correspondiente, lo que me gustaría más es modificar el div existente sin añadir uno, o sino eliminar el div correspondiente y reemplazarlo por uno nuevo con innerHTML, supongo que eso se aprenderá más adelante eliminando elementos del DOM.
He intentado que cada caja se modifique de manera diferente, una con innerHTML, otra con nodeValue, textContent, etc.
No se me ocurre otra manera de utilizar innerHTML sin que me cree un div dentro de su div correspondiente, lo que me gustaría más es modificar el div existente sin añadir uno, o sino eliminar el div correspondiente y reemplazarlo por uno nuevo con innerHTML, supongo que eso se aprenderá más adelante eliminando elementos del DOM.
Código: [Seleccionar]
<!DOCTYPE html>
<html><meta charset="utf-8">
<style>
#cajaPrincipal {
margin:auto;
width:200px;
height:200px;
text-align: center;
position:relative;
border: 1px solid #000000;
}
.box{
width:100px;
height:100px;
position: absolute;
border: 1px solid #000000;
line-height:6em;
}
#miniCaja2{left:100px;}
#miniCaja3{top:100px;}
#miniCaja4{left:100px;top:100px;}
#avanzar{
top:10px;
margin:auto;
width:100px;
border: 1px solid #000000;
text-align:center;
position:relative;
}
#avanzar:hover{background-color:black;color: white;}
</style>
<script type="text/javascript">
var numClic = 0;
function func(){
numClic=numClic+1;
var divElems = document.getElementsByTagName('div');
if(numClic == 1){divElems[1].innerHTML='<div id="miniCaja1" class="box" style="background-color:black;color:white;"> El </div>';}
if(numClic == 2){divElems[3].innerHTML = "poder";}
if(numClic == 3){divElems[4].textContent='de';}
if(numClic == 4){
divElems[5].style.backgroundColor="yellow";
divElems[5].firstChild.nodeValue = "Javascript";
}if(numClic >= 5){alert("No es posible avanzar más");}
}
</script>
</head>
<body>
<div id="cajaPrincipal">
<div id="miniCaja1" class="box">?</div>
<div id="miniCaja2" class="box">?</div>
<div id="miniCaja3" class="box">?</div>
<div id="miniCaja4" class="box">?</div></div>
<div id="avanzar" onclick="func()">Avanzar</div>
</body>
</html>
RSS