forked from marquez.juan/clase-9-eventos
133 lines
3.5 KiB
JavaScript
133 lines
3.5 KiB
JavaScript
// Agregar acá el código javascript para los ejercicios
|
|
|
|
//Ejercicio 1 de la clase 9
|
|
|
|
let clicks = 0;
|
|
const boton = document.querySelector("#botonEjc1");
|
|
const parrafo = document.querySelector("#textoContador");
|
|
|
|
boton.addEventListener("click", function(){
|
|
clicks++;
|
|
parrafo.textContent = `Botón clickeado ${clicks} veces`;
|
|
});
|
|
|
|
|
|
|
|
//Ejercicio 2 de la clase 9
|
|
|
|
const campo = document.querySelector("#texto");
|
|
const contadorCaracteres = document.querySelector("#cantidadCaracteres");
|
|
|
|
campo.addEventListener("input", function() {
|
|
contadorCaracteres.textContent = `Cantidad de caracteres: ${campo.value.length}`;
|
|
});
|
|
|
|
|
|
|
|
//Ejercicio 3 de la clase 9"
|
|
|
|
const lista = document.querySelector("#lista");
|
|
lista.addEventListener("click", function(event) {
|
|
if (event.target.tagName === "LI") {
|
|
|
|
const items = document.querySelectorAll("#lista li");
|
|
|
|
for (const item of items) {
|
|
item.classList.remove("seleccionado");
|
|
};
|
|
|
|
event.target.classList.add("seleccionado");
|
|
console.log(event.target.textContent);
|
|
}
|
|
});
|
|
|
|
|
|
|
|
//Ejercicio 4 de la clase 9
|
|
//Fase de Bubbling
|
|
const externo1 = document.querySelector("#externo");
|
|
externo1.addEventListener("click", function() {
|
|
console.log("externo");
|
|
});
|
|
|
|
const interno1 = document.querySelector("#interno");
|
|
interno1.addEventListener("click", function() {
|
|
console.log("interno");
|
|
});
|
|
|
|
const boton1 = document.querySelector("#botón");
|
|
boton1.addEventListener("click", function() {
|
|
console.log("botón");
|
|
});
|
|
//Se visualiza en consola como:
|
|
//botón
|
|
//interno
|
|
//externo
|
|
|
|
|
|
//Fase de Capturing solamente en #externo
|
|
externo1.addEventListener("click", function() {
|
|
console.log("externo - capturing");
|
|
}, true);
|
|
//Se visualiza en consola como:
|
|
//externo - capturing
|
|
//botón
|
|
//interno
|
|
//externo
|
|
|
|
|
|
|
|
//Ejercicio 5 de la clase 9
|
|
|
|
const form = document.querySelector("#formulario");
|
|
form.addEventListener("submit", function(event) {
|
|
event.preventDefault();
|
|
|
|
const nombre = document.querySelector("#nombre").value;
|
|
const edad = document.querySelector("#edad").value;
|
|
const mensaje = document.querySelector("#mensaje").value;
|
|
|
|
const errorNombre = document.querySelector("#errorNombre");
|
|
const errorEdad = document.querySelector("#errorEdad");
|
|
const errorMensaje = document.querySelector("#errorMensaje");
|
|
|
|
const resultado = document.querySelector("#resultado");
|
|
|
|
errorNombre.textContent = "";
|
|
errorEdad.textContent = "";
|
|
errorMensaje.textContent = "";
|
|
resultado.textContent = "";
|
|
|
|
if (nombre.trim() === "") {
|
|
errorNombre.textContent = "El nombre no puede estar vacío.";
|
|
errorNombre.classList.add("visible");
|
|
return;
|
|
}
|
|
|
|
errorNombre.classList.remove("visible");
|
|
|
|
if (edad.trim() === "") {
|
|
errorEdad.textContent = "La edad no puede estar vacía.";
|
|
errorEdad.classList.add("visible");
|
|
return;
|
|
} else if (isNaN(edad) || edad <= 0 || edad >= 120) {
|
|
errorEdad.textContent = "La edad debe ser un número mayor que 0 y menor que 120";
|
|
errorEdad.classList.add("visible");
|
|
return;
|
|
}
|
|
|
|
errorEdad.classList.remove("visible");
|
|
|
|
if(mensaje.trim() === "") {
|
|
errorMensaje.textContent = "El mensaje no puede estar vacío.";
|
|
errorMensaje.classList.add("visible")
|
|
return;
|
|
}
|
|
errorMensaje.classList.remove("visible");
|
|
|
|
resultado.textContent = "Formulario enviado con éxito.";
|
|
|
|
document.querySelector("#nombre").value = "";
|
|
document.querySelector("#edad").value = "";
|
|
document.querySelector("#mensaje").value = "";
|
|
}); |