En esta práctica de JavaScript he puesto en práctica el uso del objeto this como parámetro de una función en este lenguaje de programación.
El usuario pulsara sobre una serie de cajas numeradas y se le mostrará un mensaje con el número de la caja sobre la que ha pulsado.
Para poder comprender el código de esta práctica es muy importante conocer el uso de objeto this 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>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
</body>
</html>Código CSS
* {
text-align: center;
}
div {
display: inline-block;
width: 300px;
height: 200px;
color: white;
font-size: 100px;
text-align: center;
padding-top: 80px;
margin-top: 40px;
background-color: red;
}Código JavaScript
window.onload=inicializar;
function inicializar(){
document.getElementById("1").addEventListener("click", function(){mensaje(this);}, false);
document.getElementById("2").addEventListener("click", function(){mensaje(this);}, false);
document.getElementById("3").addEventListener("click", function(){mensaje(this);}, false);
document.getElementById("4").addEventListener("click", function(){mensaje(this);}, false);
}
function mensaje(valor){
var caja = valor.id;
alert("Ha pulsado en la caja número "+caja);
}Demostración
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.