Algunas aplicaciones de javascript a un boton
Ejemplos de
aplicación de funcionalidades con javascript a un botón.
1.
Mostrar una alerta
Cuando un
usuario hace clic en un botón, se puede mostrar un mensaje o alerta emergente.
<button
id="alertButton">Mostrar Alerta</button>
<script>
document.getElementById("alertButton").addEventListener("click",
function() {
alert("Has hecho clic en el botón!");
});
</script>
2. Cambiar el texto del botón
Puedes
cambiar el texto del botón cuando se hace clic en él.
<button
id="textButton">Cambiar texto</button>
<script>
document.getElementById("textButton").addEventListener("click",
function() {
this.textContent = "Texto Cambiado!";
});
</script>
3. Ocultar o
mostrar un elemento
Usar un botón para
ocultar o mostrar un elemento en la página.
<button
id="toggleButton">Mostrar/Ocultar Texto</button>
<p id="text">Este es un texto que se puede
ocultar.</p>
<script>
document.getElementById("toggleButton").addEventListener("click",
function() {
const texto =
document.getElementById("text");
if (texto.style.display ===
"none") {
texto.style.display = "block";
this.textContent = "Ocultar
Texto";
} else {
texto.style.display = "none";
this.textContent = "Mostrar Texto";
}
});
</script>
4. Deshabilitar
el botón después de un clic
Para evitar múltiples
clics, es posible deshabilitar el botón después de que el usuario haga clic una
vez.
<button
id="disableButton">Haz clic una vez</button>
<script>
document.getElementById("disableButton").addEventListener("click",
function() {
this.disabled = true;
this.textContent = "Botón
deshabilitado";
});
</script>
5. Enviar datos
de un formulario
Un botón puede enviar los
datos de un formulario usando JavaScript (sin recargar la página con fetch o XMLHttpRequest).
<form
id="miFormulario">
<input type="text" id="nombre"
placeholder="Nombre">
<button type="button"
id="submitButton">Enviar</button>
</form>
<script>
document.getElementById("submitButton").addEventListener("click",
function() {
const nombre =
document.getElementById("nombre").value;
console.log("Nombre
enviado: " + nombre);
});
</script>
6. Cambiar el
color de fondo
Hacer que el botón
cambie el color de fondo de la página o de un elemento específico.
<button id="colorButton">Cambiar color de
fondo</button>
<script>
document.getElementById("colorButton").addEventListener("click",
function() {
document.body.style.backgroundColor =
"lightblue";
});
</script>
7. Reproducir
un sonido o video
Un botón puede iniciar la
reproducción de un sonido o video en la página.
<button
id="playButton">Reproducir Sonido</button>
<audio id="sound"
src="tu-sonido.mp3"></audio>
<script>
document.getElementById("playButton").addEventListener("click",
function() {
document.getElementById("sound").play();
});
</script>
8. Abrir un
enlace o una nueva ventana
Hacer que un botón
abra un enlace o una nueva ventana.
<button
id="linkButton">Ir a Google</button>
<script>
document.getElementById("linkButton").addEventListener("click",
function() {
window.location.href =
"https://www.google.com";
});
</script>
9. Contador de
clics
Hacer que un botón
cuente cuántas veces se ha hecho clic en él.
<button
id="countButton">Haz clic aquí</button>
<p id="contador">Clics: 0</p>
<script>
let contador = 0;
document.getElementById("countButton").addEventListener("click",
function() {
contador++;
document.getElementById("contador").textContent = "Clics:
" + contador;
});
</script>
10. Aplicar una
animación o transición
Aplicar una
animación CSS o manipular las propiedades de estilo dinámicamente cuando se
hace clic en el botón.
<button
id="animateButton">Animar</button>
<div id="caja"
style="width:100px; height:100px;
background-color:red;"></div>
<script>
document.getElementById("animateButton").addEventListener("click",
function() {
const caja =
document.getElementById("caja");
caja.style.transition = "width 2s";
caja.style.width = "300px";
});
</script>
11. Solicitar
datos de una API (AJAX)
Hacer que un botón
realice una petición a una API o servidor para obtener datos (como usando fetch).
<button
id="apiButton">Obtener Datos</button>
<div
id="apiResponse"></div>
<script>
document.getElementById("apiButton").addEventListener("click",
function() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
document.getElementById("apiResponse").textContent =
JSON.stringify(data);
});
});
</script>
12. Validar un
formulario
Un botón puede validar la
entrada del usuario antes de enviar el formulario.
<form
id="formulario">
<input type="text" id="email"
placeholder="Ingresa tu email">
<button type="button"
id="validateButton">Validar Email</button>
</form>
<script>
document.getElementById("validateButton").addEventListener("click",
function() {
const email =
document.getElementById("email").value;
if (email.includes("@")) {
alert("Email válido");
} else {
alert("Email no válido");
}
});
</script>
Comentarios
Publicar un comentario