No funciona mi botón con JavaScript

Question

He creado un enlace que funcione como un botón, que cuando se le haga click, aparezca un formulario un con na área de texto listo para redactar un mensaje. Las imágenes están maquetadas dentro de un while de PHP que por tal rezón debería de funcional en todos los enlaces de "Responder mensaje" Una vez dado click al enlace: El problema resulta que cuando le doy click al primer enlace de la, todo funcionan bien. Pero cuando hago en clikc a cualquiera de los enlaces de abajo, no me aparece el formulario y no entiendo cual es la razón. Código JavaScript: // Selecionamos var linkSent = document.querySelector("a[class='black-text']"); var createMessage = document.querySelector("form[class='col s12 hide']"); var message = document.querySelector("textarea[name='chat']"); var cansel = document.querySelector("a[role='button']"); // Si oprime el enlace, mustra el formulario linkSent.addEventListener('click', () => { linkSent.className = "hide"; createMessage.className = 'show'; message.focus(); }); // Si oprime el boton canselar, oculta el formulario cansel.addEventListener('click', () => { linkSent.className = "show"; createMessage.className = "hide"; }); Este es el formulario de HTML5: Vuelvo a mencionar que el formulario esta dentro de un while de PHP y en la sentencia sql los mensajes están ordenados DESC. Acá le dejo el código completo del while: query("SELECT *, users.id_usuario, users.name, users.surname, users.email FROM message_chat INNER JOIN users ON users.email = email_user WHERE id_user_chat = $id ORDER BY id_chat DESC LIMIT $home, $postPage"); $stmt->execute(); while ($row = $stmt->fetch()) { // Mis mensajes enviados $name = $row['name']; $surname = $row['surname']; $myMessages = $row['message_chat']; $title = $row['title_product']; $email_user = $row['email']; $id_product = $row['id_product_chat']; $id_user = $row['id_usuario']; $fecha = $row['create_at_chat']; ?>

Mi foto de perfil Enviado a: •

Enviar otro mensaje

Triby · Accepted Answer

Te funciona solo con el primero porque document.querySelector() te devuelve solo un elemento y debes usar document.querySelectorAll() para obtener todos los enlaces y, después, recorrerlos para asignarles el evento click. Lo mismo para los enlaces Cancelar y botón de envío. Para mostrar y ocultar basta con usar classList.toggle('hide'), que simplemente agrega la clase si no la tiene, o la quita si ya la tiene. // Selecionamos var linkSent = document.querySelectorAll(".black-text"); var cancel = document.querySelectorAll("a[role='button']"); var submit = document.querySelectorAll("[type='submit']"); // Crear una sola función para todos los enlaces function linkClick(e) { // Obtener enlace en el que se hizo clic let link = e.target; // Ocultar enlace link.classList.toggle('hide'); // Obtener contenedor padre para buscar otros elementos let container = link.closest('.col.s10'); // Mostrar formulario container.querySelector('form').classList.toggle('hide'); // Activar textarea container.querySelector('textarea').focus(); } // Crear una sola función para cancelar function cancelClick(e) { // Obtener enlace en el que se hizo clic let link = e.target; // Obtener contenedor padre para buscar otros elementos let container = link.closest('.col.s10'); // Ocultar formulario container.querySelector('form').classList.toggle('hide'); // Mostrar enlace container.querySelector(".black-text").classList.toggle('hide'); } // Crear función para enviar mensaje function submitClick(e) { // Evitar comportamiento normal de formulario e.preventDefault(); // Obtener botón let btn = e.target; // Obtener formulario let frm = btn.closest('form'); // Aquí debes agregar el código para enviar el formulario por AJAX } // Recorrer enlaces para asignar evento clic linkSent.forEach(link => link.addEventListener('click', linkClick)); // Asignar evento cancel cancel.forEach(link => link.addEventListener('click', cancelClick)); // Asignar evento submit submit.forEach(link => link.addEventListener('click', submitClick)); .col.s10 { background:#ddd; margin:10px; padding:10px; } .hide { display:none; }

Enviar otro mensaje

No funciona mi botón con JavaScript

One Answer

Add your own answers!

Ask a Question