Why doesn’t this work, I want it to show me "sure to proceed?" When I click the button to which the ".collect" class is attached.
const button = document.querySelector(".collect");
button.addEventListener("click", function() {
alert("Sure to proceed?");
});<button type="submit" class="collect">PROCESS</button>Executing the JavaScript after the target element solves the problem, refer to the post anchored to @David ‘s comment. Thanks.
>Solution :
Instead of alert, use confirm.
I created a wrapper called navigate that executes the callback, if the user hits the "OK" button.
The performNavigation event handler calls this wrapper function.
const navigate = (message, callback) => {
if (confirm(message) && callback) {
callback();
}
}
const performNavigation = () =>
navigate("Are you sure you want to proceed?", () => {
console.log('Proceeding...');
});
const button = document.querySelector('.collect');
button.addEventListener('click', performNavigation);<button class="collect">Proceed</button>