Reputation: 11
<div class="alert">
<span
id="button"
class="closebtn"
onclick="this.parentElement.style.display='none';">×
</span>
This is an alert box.
</div>
I tried using the alert function but I learned that you can't manipulate it so I created an alert div but I don't know how to achieve the title.
Upvotes: 1
Views: 221
Reputation: 354
You can store number of clicks in a variable and when it reaches certain limit, you hide the alert and reset the counter.
let countClicks = 0;
document.querySelector('#button').onclick = function() {
countClicks++;
if (countClicks === 3) {
document.querySelector('.alert').classList.add('hidden');
countClicks = 0;
}
};
.hidden {
display: none;
}
#button {
cursor: pointer;
}
<div class="alert">
<span>This is an alert box.</span>
<span id="button" class="closebtn" role="button">×</span>
</div>
Upvotes: 2