this para referirnos al botón sobre el que la función que se activa con el evento click se refiere al propio botón. Así evitamos volver a referirnos al propio botón ya que estamos en su contexto.
Cada vez que pulsamos sobre el botón cambia el color del texto según valores aleatorios de rgb entre 0 y 255 para cada color rojo, verde, azul.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>This</title>
<script type="text/javascript" src="script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 id='mih1'>The Rainbow</h1>
<button id='miboton'>Colors</button>
</body>
</html> JavaScript
En este caso usamos código JavaScript puro sin usar jQuery.
En este caso this está haciendo referencia a la variable miboton.
La función
rgb retorna un string. Si incluimos la siguiente línea podemos ver que nos da un string.console.log(typeof(rgb())); 'use strict'
window.addEventListener('load',function(){
var mih1=document.querySelector("#mih1");
var miboton=document.querySelector("#miboton");
miboton.addEventListener('click',function(){
console.log("Evento click capturado");
this.style.border='2px solid red';
mih1.style.color=rgb();
function rgb(){
let r=Math.floor(Math.random()*256);
let g=Math.floor(Math.random()*256);
let b=Math.floor(Math.random()*256);
console.log("r=",r);
console.log("g=",g);
console.log("b=",b);
return "rgb("+r+","+g+","+b+")";
}
});
}); CSS
h1 {
display: block;
font-size: 4em;
font-weight: bold;
} 
No hay comentarios:
Publicar un comentario