I would like to two functions to one button. The first one will be added anyway while the second function depends on a true/false condition.
The following code works, but should I do something like this?
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to attach a click event to a button.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
document.getElementById("myBtn").addEventListener("click", test);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
function test() {
document.getElementById("demo").innerHTML += "test";
}
</script>
</body>
</html>
You can use condition
const btn = document.getElementById("myBtn");
let isEvent = true;
// Add 'Event'
btn.addEventListener("click", displayDate);
// Add conditional 'Event'
if (isEvent) {
btn.addEventListener("click", test);
}
// OR
btn.addEventListener("click", e => {
if (isEvent) {
test(e);
}
});
Notice: Do not forget to remove event
To solve your problem I would make 1 function with a function within that makes the decision for your condition.