Autor Tema: JavaScript cambiar apariencia de una web con innerHTML y editar estilo CU01138E (Leído 3284 veces)

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

Código: [Seleccionar]

<!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>

Ogramar · « **Respuesta #1 en:** 29 de Enero 2018, 18:22 »

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

paramonso · « **Respuesta #2 en:** 30 de Enero 2018, 09:48 »

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.

Cita de: Ogramar en 29 de Enero 2018, 18:22

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.

Ogramar · « **Respuesta #3 en:** 12 de Junio 2018, 19:15 »

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

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

Noticias:

Autor Tema: JavaScript cambiar apariencia de una web con innerHTML y editar estilo CU01138E (Leído 3284 veces)

paramonso

JavaScript cambiar apariencia de una web con innerHTML y editar estilo CU01138E

Ogramar

Re:JavaScript cambiar apariencia de una web con innerHTML y editar estilo CU01138E

paramonso

Re:JavaScript cambiar apariencia de una web con innerHTML y editar estilo CU01138E

Ogramar

Re:JavaScript cambiar apariencia de una web con innerHTML y editar estilo CU01138E

Preguntas y respuestas