Without jQuery:
document.addEventListener("DOMContentLoaded", function(event) {
var button = document.getElementById('click_me');
var elem = document.getElementById('message');
var count = 0;
button.addEventListener('click', function(e) {
e.preventDefault();
count++;
if(count == 5){
elem.style.display = 'block';
}
}, false);
});
#message {
background: #0f0;
display: none;
padding: 10px;
}
<button type="button" id="click_me">Click Me</button>
<div id="message">Hello World</div>
With jQuery:
$(function() {
var count = 0;
$('#click_me').click(function(e) {
e.preventDefault();
count++;
if(count == 5) {
$('#message').show();
}
});
});
#message {
background: #0f0;
display: none;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="click_me">Click Me</button>
<div id="message">Hello World</div>
solved Trigger callback after clicking N times