0
166
ViewsHow to output alert after conditions are met using javascript?
I want to do an alert() in the next click but it keeps alerting me whether I'm doing my first click.
function acquire(clicked_id){
count++;
var val = document.getElementById("qty").value;
let data = document.getElementById(clicked_id);
var disp = document.getElementById("display");
if(data.classList.contains("taken")){
alert("Seat is taken!");
count--;
}else{
document.getElementById(clicked_id).classList.add("taken")
}
document.getElementById("display").innerHTML = count;
if(count==val){
alert("Exceeded!");
}
}
·
Juan Pablo Isaza
1 answers
Answer question0
I suggest you delegate
I am not sure how you would want to "un-take" a seat
window.addEventListener("DOMContentLoaded", () => {
const disp = document.getElementById("display");
const val = document.getElementById("qty").value;
const seats = document.getElementById("seats");
seats.addEventListener("click", function(e) {
const tgt = e.target.closest(".seat")
if (!tgt) return; // not a seat or a child of seat
if (tgt.classList.contains("taken")) {
alert("Seat is taken!");
return; // stop
}
tgt.classList.toggle("taken");
const count = seats.querySelectorAll(".seat.taken");
if (count.length > val) {
tgt.classList.remove("taken");
alert("Exceeded!");
}
else document.getElementById("display").innerHTML = count.length;
});
});.taken {
background-color: red;
}<input type="hidden" id="qty" value="2" />
<div id="seats">
<div id="seat1" class="seat">Seat 1</div>
<div id="seat2" class="seat">Seat 2</div>
<div id="seat3" class="seat">Seat 3</div>
</div>
<span id="display"></span>
·
Juan Pablo Isaza
Report
Answer question