En esta práctica de JavaScript he puesto en práctica el uso de la propiedad innerHTML.
Cuando se pulsa sobre diferentes párrafos se produce unas modificaciones de texto en otros párrafos.
Para poder comprender el código de esta práctica es muy importante conocer el uso de la propiedad innerHTML y la forma de acceder a los elementos del DOM y a los atributos de dichos elementos. Como ayuda puedes echarle un vistazo a los siguientes enlaces:
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Práctica de JavaScript</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<script src="funciones.js" type="text/javascript"></script>
</head>
<body>
<p id="parrafo1">Este texto es el original.</p>
<p id="parrafo2">Pulse aquí para leer el texto anterior.</p>
<p id="parrafo3">Este es el texto que debe ser sustituido.</p>
<p id="parrafo4">Pulse aquí para cambiar el texto anterior.</p>
<p id="parrafo5">Este es el texto de ampliación.</p>
<p id="parrafo6">Pulse aquí para ampliar el texto.</p>
</body>
</html>Código CSS
* {
text-align: center;
}Código JavaScript
window.onload = inicializar;
function inicializar(){
document.getElementById("parrafo2").addEventListener("click", primero, false);
document.getElementById("parrafo4").addEventListener("click", segundo, false);
document.getElementById("parrafo6").addEventListener("click", tercero, false);
}
function primero(){
let parrafo1 = document.getElementById("parrafo1");
let contenido = parrafo1.innerHTML;
alert(contenido);
}
function segundo(){
let texto = "Este es el texto ya cambiado.";
let parrafo2 = document.getElementById("parrafo2");
parrafo2.innerHTML = texto;
}
function tercero(){
let texto = " Y este es el texto para la ampliación del texto.";
let parrafo3 = document.getElementById("parrafo3");
parrafo3.innerHTML += texto;
}Demostración
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.