Autor Tema: Javascript. Modificar contenido web con innerHTML nodeValue textContent CU01138E (Leído 2514 veces)

JuansT · « **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.

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>

bermartinv · « **Respuesta #1 en:** 26 de Enero 2017, 15:56 »

Hola JuansT,
plantearte algunas cuestiones. Has utilizado muchos 'if', te recomiendo que uses la estructura de control 'if', con sus correspondientes 'else if' y 'else'. Además intenta indentar el código para que sea mas legible, te ayudará a ver las cosas.

La cuestión que planteas de crear un nuevo div no te entiendo mucho. Puedes recoger todos los div que quieras si los clasificas en un class común en un array.

Te muestro

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.getElementsByClassName('box');
if(numClic == 1){
	divElems[0].innerHTML='El';
	divElems[0].style.backgroundColor='black';
	divElems[0].style.color='white'
	}
else if(numClic == 2){
	divElems[1].innerHTML = "poder"
}
else if(numClic == 3){
	divElems[2].textContent='de'
}
else if(numClic == 4){
	divElems[3].style.backgroundColor="yellow";
	divElems[3].firstChild.nodeValue = "Javascript";
}
else{
	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>

Sergiop · « **Respuesta #2 en:** 20 de Agosto 2017, 21:29 »

Esta fue mi solición:

Código: [Seleccionar]

<!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 type="text/css">
            body{
                text-align: center;
            }
            #principial{
                border: 1px solid black;
                width:200px;
                height:202px;
                margin-top: 200px;
                margin-left: 40%;
                padding: 0px;
                position: relative;
            }
            .cuadros{
                border:1px solid black;
                width: 100px;
                height:60px;                         
                margin: 0px;
                text-align: center;
                padding-top: 40px;
                font-weight: bolder;
            }
            .cuadros2{
                position: absolute;
                border:1px solid black;
                width: 100px;
                height:60px;                         
                margin: 0px;
                padding-top: 40px;
                left: 100px;
                top: 0px;
                text-align: center;
                font-weight: bolder;
            }
            .cuadros3{
                position: absolute;
                border:1px solid black;
                width: 100px;
                height:60px;                         
                margin: 0px;
                left: 100px;
                top:102px;
                text-align: center;
                padding-top: 40px;
                font-weight: bolder;
            }
            hr{
                width: 35%;
                margin-left: 30%;
            }
            button{
                margin-left:-60px;
                height: 60px;
                background-color: skyblue;
                border: 5px dotted gray;
            }
        </style>
        <script type="text/javascript">

            var num = 1;

            function siguiente() {

                switch (num) {
                    case 1:
                        var cuadro1 = document.getElementById("cuadro1");                       
                        cuadro1.textContent = "El";
                        cuadro1.style.backgroundColor = "black";
                        cuadro1.style.color = "white";
                        num++;
                        break;
                    case 2:                       
                        var cuadro2 = document.getElementById("cuadro2");                    
                        cuadro2.innerHTML= "poder";                                             
                        num++;
                        break;                       
                    case 3:                       
                        var cuadro3 = document.getElementById("cuadro3");
                        cuadro3.innerHTML="de";
                        num++;
                        break;
                    case 4:          
                        var cuadro4 = document.getElementById("cuadro4");
                        cuadro4.innerHTML="JavaScript";
                        cuadro4.style.backgroundColor="yellow";                                                
                        num++;
                        break;
                    default:
                        alert("No es posible avanzar más");
                        break;
                }
            }
        </script>
    </head>
    <body>
        <div id="principial">
            <div id="cuadro1" class="cuadros">?</div>
            <div id="cuadro2" class="cuadros2">?</div>
            <div id="cuadro3" class="cuadros">?</div>
            <div id="cuadro4" class="cuadros3">?</div>                                                
        </div>
        <hr>
        <button onclick="siguiente()">Siguiente</button>
    </body>
</html>

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: