Quiero tener una confirmación antes de eliminar una cuenta. ¿Cómo puedo hacerlo?
Esta es la imagen de la interfaz de usuario de las cuentas.
Este es el código html.
<a href="uses_script.php?user_id=<?php echo $row['id'];?>&username=<?php echo $_SESSION['user_username']; ?>" id = "del" data-toggle="tooltip" data-placement="top" title="Delete"> <i class="mdi mdi-close"></i></a>
Este es el javascript.
const deleteIcon = document.querySelectorAll("del"); deleteIcon.addEventListener("click", (e) => { const confirmVar = confirm("Do you want to proceed? "); if (!confirmVar) e.preventDefault(); }
Lo que quiero hacer es antes de eliminar usuarios, quiero tener una confirmación de que cuando haga clic en Aceptar, se eliminará y cuando haga clic en cancelar, simplemente se cerrará.
Este podría ser el código correcto.
const deleteIcon = document.querySelectorAll("#del"); deleteIcon.forEach ((element) => { element.addEventListener("click", (e)=>{ const confirmVar = confirm("Do you want to proceed?"); if (!confirmVar){ e.preventDefault();}}) })
He iterado a través de los botones para agregar el detector de eventos para cada uno de ellos y también he agregado el parámetro e
para que identifique el evento.
NOTA: addEventListener
no funciona para una colección de elementos . Tendrá que iterar a través de cada elemento.
Su oyente no se aplica al elemento correctamente.
Use un #
en su Selector de consultas para orientar un elemento por ID:
const deleteIcon = document.querySelector("#del");
Sin embargo, como hay varias líneas, puede que no sea la mejor idea usar una ID para el botón Eliminar, use una clase en su lugar.
Agregue class="del"
(o un nombre de clase de su elección) a su elemento <a>
y use el siguiente Selector de consultas (usar un .
significa seleccionar una clase):
const deleteIcons = document.querySelectorAll(".del");
Esto devolverá una lista de elementos que luego puede iterar para agregarle detectores de eventos:
deleteIcons.forEach(function(element) { element.addEventListener("click", (e) => { const confirmVar = confirm("Do you want to proceed? "); if (!confirmVar) e.preventDefault(); }); });
Otras lecturas: