clase-9-eventos/clase-9.js

// Agregar acá el código javascript para los ejercicios
const boton1 = document.querySelector("button");
const parrafo1 = document.querySelector("p");
var i = 0

boton1.addEventListener("click", function () {
    i = i + 1
    parrafo1.textContent = `Este boton ha sido clickeado ${i} veces.`;
});

const campo = document.querySelector("input");
const parrafo2 = document.querySelector("#contadorCaracteres");

campo.addEventListener("input", (e) => {
    parrafo2.textContent = `El campo de texto tiene ${e.target.value.length} caracteres.`;
});

const lista = document.querySelector("ul");

lista.addEventListener("click", (e) => {
    if (e.target.tagName === "LI") {
        const items = document.querySelectorAll("li")
        for (const item of items) {
            item.classList.remove("seleccionado");
        }

        e.target.classList.add("seleccionado");

        console.log(e.target.textContent);
    }
});

document.querySelector("#externo").addEventListener("click", () => {
    console.log("externo");
}, true);
document.querySelector("#interno").addEventListener("click", () => {
    console.log("interno");
});
document.querySelector("#boton").addEventListener("click", () => {
    console.log("boton");
});

formulario.addEventListener("submit", function(e) {
    e.preventDefault();

    const nombre = document.querySelector("#nombre");
    const mensaje = document.querySelector("#mensaje");
    const errorNombre = document.querySelector("#errorNombre");
    const errorMensaje = document.querySelector("#errorMensaje");
    const resultado = document.querySelector("#resultado");

    errorNombre.textContent = "";
    errorMensaje.textContent = "";
    resultado.textContent = "";

    let hayErrores = false;

    if (nombre.value.trim() === "") {
        errorNombre.textContent = "El nombre no puede estar vacío";
        hayErrores = true;
    }

    if (mensaje.value.trim() === "") {
        errorMensaje.textContent = "El mensaje no puede estar vacío";
        hayErrores = true;
    }

    if (!hayErrores) {
        resultado.textContent = "Formulario enviado correctamente";
        formulario.reset();
    }
});