The following code shows an alert box:
I want each box to be displayed by clicking on its own button 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>
can anyone help me to do so?
You can add a class to all your buttons, lets say toggle, then use javascript to call your function like:
var btns = document.getElementsByClassName('toggles');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
alert("Finaly!");
}
}
you don't need the for loop as getElementById returns a single element. If you want to show alert on both button click and don't want to write two separate codes give them a similar class name and query them that way using document.querySelectorAll(a dot class name in quotes).
<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>