El siguiente código muestra un cuadro de alerta:
Quiero que cada cuadro se muestre haciendo clic en su propio botón html
<button class="btn-alert btn-success" type="submit">delete</button> <button class="btn-alert btn-success" type="submit">delete</button> <button class="btn-alert btn-success" type="submit">delete</button> <div class="alert-s col-4"></div> <div class="alert-s col-4"></div> <div class="alert-s col-4"></div> <script> const targetDiv = document.getElementById("alert"); const btn = document.getElementById("toggle"); function clickfn() { for(let i = 0; i < targetDiv.length; i++) { if (targetDiv.style.display = "none") { targetDiv.style.display = "block"; } else { targetDiv.style.display = "none"; } } }; </script>¿alguien puede ayudarme a hacerlo?
Puede agregar una clase a todos sus botones, digamos toggle , luego use javascript para llamar a su function como:
var btns = document.getElementsByClassName('toggles'); for (var i = 0; i < btns.length; i++) { btns[i].onclick = function () { alert("Finaly!"); } }no necesita el bucle for ya que getElementById devuelve un solo elemento. Si desea mostrar una alerta en ambos botones, haga clic y no desea escribir dos códigos separados, asígneles un nombre de clase similar y consúltelos de esa manera usando document.querySelectorAll ( un nombre de clase de punto entre comillas ) .
<button class="btn">Button one</button> <button class="btn">Button two</button> <script> const btns = document.querySelectorAll(".btn"); for (let i = 0; i < btns.length; i++) { btns[i].onclick = () => { alert(`button ${i + 1} was clicked`); }; } </script>