Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
innerHTML
<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>textContent
Con esta otra propiedad podremos modificar el contenido de texto de un elemento.
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 párrafos
Cuando el usuario escriba un número en el cuadro de texto, deben añadirse a la página tantos párrafos como indique dicho número.
Para detectar cuando el cuadro de texto cambia, usaremos el evento input.
3. 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(./img/bluemap.jpg); margin:auto; overflow:hidden; position:relative">
<img src="https://pablomonteserin.com/res/javascript-es6/ex/mapa/img/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.
Quedaría un código similar a este:
for(let i = 0; i<10; i++){
code += '<img src="... style="margin-left:' + x + 'px...'
}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».