if I select more than 5 I want that another Html page will pop up like an ads to the user will unselect one of the 5 selected
let counter = 0;
$('.switched').change(function () {
if ($(this).parent().parent().hasClass('clicked')) {
$(this).parent().parent().removeClass('clicked');
$(this).parent().parent().addClass('notClicked');
counter--;
console.log(counter);
}
else if (counter == 5) {
$("#htmlTemplate").empty();
$("#htmlTemplate").load("popUp.html");
$(".selectedCoins").append(".clicked");
}
else if ($(this).parent().parent().hasClass('notClicked')) {
$(this).parent().parent().removeClass('notClicked');
$(this).parent().parent().addClass('clicked');
counter++;
console.log(counter);
}
});
I may have misunderstood your need but you don't necessarily need to go to another page to load an ad, especially if you want to interact with the previous one.
let counter = 0;
document.querySelectorAll(".select").forEach((e) => {
e.addEventListener("click", () => {
e.classList.toggle("selected");
if(e.classList.contains("selected")){
counter ++;
}else{
counter --;
}
if(counter == 5){
document.getElementById("ad").classList.remove("d-none")
}else{
document.getElementById("ad").classList.add("d-none")
}
})
});.select{
display:inline-block;
}
.select, #ad{
border:1px solid black;
width:20px;
height:20px;
margin:5px;
cursor:pointer;
}
#ad{
background-color:blue;
}
.selected{
background-color:orange;
}
.d-none{
display:none;
}<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div id="ad" class="d-none"></div>Yes you can add it through bootstrap modal for example given at this link,
https://getbootstrap.com/docs/4.1/components/modal/#vertically-centered
$('#myModal').modal('toggle')
and you can customize it as you want.