HTML
Disponemos de tres botones.- El boton1 lanza un alert programado en el propio html.
- El botón 2 lanza la función cambiaColorA que está ya programada en el archivo js.
- El botón 3 lanza la función cambiaColorB y para activar este evento se requiere doble click
onclick para doble click se usa ondblclick. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Eventos</title>
</head>
<body>
<h1>Manejando Eventos</h1>
<p>Presiona el botón para ver los cambios</p>
<p>
<button id="boton1" onclick="alert('Has pulsado el botón');">Púlsame</button>
</p>
<p>
<button id="boton2" onclick="cambiaColorA()">Púlsame a mi también</button>
</p>
<p>
<!--botón con doble click es: ondblclick-->
<button id="boton3" ondblclick="cambiaColorB()">Yo con doble click</button>
</p>
<hr>
<!--scripts-->
<script src="eventos1.js"></script>
</body>
</html> JavaScript
No es obligatorio poner un return al finalizar una función de JavaScript que no devuelve nada, pero en ese caso si la ejecutamos nos responderá al final con
undefined. Si deseamos evitar ese mensaje por consola podemos escribir como última línea de la función return true y seguido de un punto y coma que en este caso es optativo.
'use strict'
//Eventos del ratón
var boton2=document.querySelector("#boton2");
function cambiaColorA(){
//vemos en la consola un contador que aumenta con cada pulsación
console.log("Ha sido pulsado");
boton2.style.background="pink";
return true; //si no se pone esto se verá un undefined
}
var boton3=document.querySelector("#boton3");
boton3.style.padding="10px";
boton3.style.border="1px solid #cdcdcd"; //gris
function cambiaColorB(){
console.log("El doble ha sido pulsado");
let bg=boton3.style.background;
console.log(bg);
if(bg=="green"){
boton3.style.background="red";
}else{
boton3.style.background="green";
}
return true;
}
En la imagen vemos la consola de Chrome y cómo va alternando entre color verde y rojo al pulsar el boton3 con doble click.
 |
| en Chrome |
Lo curioso es que este mismo código en Firefox se queda en color verde y nunca cambia a rojo. El motivo es que en Chrome el contenido de la propiedad
background es simplemente un texto con el color red o green. Por el contrario en Firefox da más información: green none repeat scroll 0% 0%. |
| en Firefox |
Alternativa 1
Podemos crear una variable de control auxiliar que sea de tipo booleano y que alterne sus valorestrue o false. De esta forma sabremos qué color toca en cada momento. var boton3=document.querySelector("#boton3");
boton3.style.padding="10px";
boton3.style.border="1px solid #cdcdcd"; //gris
var aux=true; //variable auxiliar global
function cambiaColorB(){
console.log("El doble ha sido pulsado");
let bg=boton3.style.background;
console.log(bg);
if(aux){
boton3.style.background="red";
aux=!aux;
}else{
boton3.style.background="green";
aux=!aux;
}
return true;
}
Alternativa 2
Podemos obtener de la propiedadbackground únicamnte el texto, con lo que estaríamos obteniendo exclusivamente el color que es lo que nos interesa. let bg=boton3.style.backgroundColor;
De esta forma, ahora si conseguimos en Fireforx únicamente el texto con el color.
 |
| ahora si funciona en Firefox |
Alternativa 3
Podemos usar la expresiónstr.includes("texto") para ver si el string contiene cierto texto. if(bg.includes("green")){
}
 |
| en Firefox ahora si alterna el color |
No hay comentarios:
Publicar un comentario