Método innerHTML de Javascript

<div id="pp" style="background-color:yellow; width:200px; height:200px">
	<input type="button" id="btn"/>
</div>

<script>
	const anadeHTML = _ =>{
		document.querySelector("#pp").innerHTML="<h1>Casa</h1>";
	}
	document.querySelector('#btn').addEventListener('click', anadeHTML)
</script>

Ejercicios: innerHTML

1. Ejercicio: mouseover

Dadas dos capas, al hacer “mouseover” sobre la capa de arriba, que aparezca en la capa de abajo el texto “Has hecho mouse over sobre la capa 1”

2. Ejercicio: mapa

Teniendo en cuenta que con el siguiente código html puedo pintar una moneda sobre en mapa en cierta posición:

<div style="width:725px; height:483px; background: url(Bluemap.jpg); margin:auto; overflow:hidden; position:relative">
	<img src="goldCoin.png" style="width:50px;position:absolute; margin-left:577px; margin-top:75px">
</div>

Pintar 10 monedas en coordenadas aleatorias sobre la superficie de un mapa.

Para ello, tendremos un bucle que en cada iteración irá acumulando el código fuente de imágenes con posiciones aleatorias. Finalmente pintaremos el código fuente generado dentro de un div usando el método innerHTML

Planteamiento de resolución

Necesitaremos un bucle que en cada iteración pinte una moneda sobre el mapa utilizando unas coordenadas aleatorias. Por tanto en cada iteración, debemos de calcular un número aleatorio que vaya desde 0 hasta el ancho total de la fotografía. Esta será la coordenada horizontal de la moneda.

Luego, calcularemos otro número aleatorio para la coordenada vertical.

Utilizando dichas coordenadas, podremos pintar una moneda con una ubicación aleatoria en la pantalla.

Sin embargo, no queremos pintar sólo una moneda, sino diez. Para lograr esto, en cada iteración iremos acumulando el código fuente de las monedas en una variable.

Cuando el bucle termine, pintaremos todas las monedas sobre el mapa.

En cuanto a la maquetación HTML de este ejercicio…

Cuando quiero ubicar con total libertad un elemento dentro de otro, como es el caso de este ejercicio en el que quiero ubicar las monedas dentro de la capa contenedora, utilizo el estilo “position:relative” para la capa contenedora y “position:absolute” para los elementos internos que quiero ubicar.

Por otra parte, si quiero que los elementos que exceden las dimensiones de una capa no se vean, utilizaré el estilo “overflow:hidden”.

← Obtener la letra del DNI
Propiedad style →

Aviso Legal | Política de privacidad