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: paramonso en 23 de Octubre 2017, 19:07
-
Hola. Dejo la soluciòn al ejercicio CU01138E del tutorial de programación JavaScript desde cdero. innerHTML JavaScript. Modificar texto o html (p.ej. div) en tiempo real. this: acceder al nodo actual
<!DOCTYPE html>
<html><head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
/* ********************************************************** */
/* ********************* EJERCICIO ************************** */
/* ********************************************************** */
var Avanza=0
function cambiaTexto() {
var cajaDiv = document.getElementsByTagName('div');
Avanza=Avanza+1;
if (Avanza==1){
cajaDiv[1].style.backgroundColor = 'black';
cajaDiv[1].style.color = 'white';
cajaDiv[1].innerHTML="El";
}
if (Avanza==2){cajaDiv[2].innerHTML="Poder";}
if (Avanza==3){cajaDiv[3].innerHTML="de";}
if (Avanza==4){
cajaDiv[4].style.backgroundColor = 'yellow';
cajaDiv[4].style.color = 'black';
cajaDiv[4].innerHTML="JavaScript";
}
if (Avanza>=5) {
cajaDiv[5].style.color = 'white'
cajaDiv[5].innerHTML="!!!!! No es posible avanzar mas !!!!";;}
}
</script>
<style type="text/css">
body { background-color:green;
font-family: sans-serif;
}
#Cuadro{
position: absolute;
/*nos posicionamos en el centro del navegador*/
top:50%;
left:50%;
/*determinamos una anchura*/
width:300px;
/*indicamos que el margen izquierdo, es la mitad de la anchura*/
margin-left:-100px;
/*determinamos una altura*/
height:350px;
/*indicamos que el margen superior, es la mitad de la altura*/
margin-top:-170px;
}
.boton{
margin-top:5px;
width: 205px;
float:left;
text-align:center;border:solid;
color: white; border-radius: 40px;
background: rgb(202, 60, 60);
box-shadow:5px 5px 10px 5px black;}
.boton:hover {background-color:BurlyWood;
box-shadow:5px 5px 10px 5px grey;
color:black;}
#uno{float:left;
border:solid 1px;
height:100px;
width:100px;
background-color:white;
text-align:center;
line-height: 100px;
}
#cinco{float:left;width:300px;height:15px; margin-top:5px;margin-left:-35px;}
</style>
</head>
<body>
<h1>Ejercicio curso aprenderaprogramar.com</h1>
<div id='Cuadro'>
<div id="uno" onclick="this.">?</div>
<div id="uno">?</div>
<div id="uno">?</div>
<div id="uno">?</div>
<div id="cinco"></div>
<h3 class='boton' onclick='cambiaTexto() '>Avanza</h3>
</div>
</body></html>
;)
-
Buenas, para poner título a los temas, debe hacerse según se indica en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0
Aunque aparentemente funcione, este código no debe considerarse bueno porque una línea genera error, en concreto <div id="uno" onclick="this.">?</div>
Además has definido con el mismo id diferentes div, esto no es una buena práctica. En una web los ids deben ser únicos y no repetirse. Si quieres aplicar un mismo estilo a diferentes elementos debes hacerlo usando class en lugar de id.
Salu2
-
Hola Ogramar.
Estoy de acuerdo en lo de id.
Tanto utilizarlo se me fue el santo al cielo de que cada id debe de ser único para cada elemento y no repetirse.
Tendría que haber utilizado class.
Aunque aparentemente funcione, este código no debe considerarse bueno porque una línea genera error, en concreto <div id="uno" onclick="this.">?</div>
He estado repasando el código que me dices que produce un error y no lo encuentro.
Podrías explicarme donde esta el error y lo corrijo.
Gracias. ;)
-
Buenas, ahora no recuerdo bien, pero el asunto estaría en el onclick="this." ¿Qué significa ese código? El error salta al hacer click en el div uno porque la acción que tienes especificada en el onclick no tiene sentido. Da la impresión de que eso se quedó ahí a medio hacer ¿? O algo que habías escrito y que luego borraste, no lo sé.
Salu2