Using Javascript, how do you remove a single function from a "click" event listener, after the first click event, when there are multiple functions being used on the element with the "click" event listener? Here, after the first click, only toggleView() should remain and renderList() should be removed.
const button = document.getElementById("view_button");
button.addEventListener("click", () => {
toggleView(); // want to keep this indefinitely
renderList(); // want to remove this after the first click
button.removeEventListener("click", renderList);
});
You need to add both separately, and specify { once: true } on the one you want removed after first execution.
See MDN:
once
A boolean value indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.
function toggleView() {
console.log('toggleView');
}
function renderList(evt) {
console.log('renderList');
}
const button = document.getElementById("view_button");
button.addEventListener("click", toggleView);
button.addEventListener("click", renderList, { once: true });<button type="button" id="view_button">Click</button>You can add two event listeners and remove the one
function toggleView() {
console.log('toggleView');
}
function renderList(evt) {
evt.currentTarget.removeEventListener("click", renderList);
console.log('renderList');
}
const button = document.getElementById("view_button");
button.addEventListener("click", toggleView);
button.addEventListener("click", renderList);<button type="button" id="view_button">Click</button>or you can just add logic to determine if the function should be run.
function toggleView() {
console.log('toggleView');
}
function renderList() {
console.log('renderList');
}
const button = document.getElementById("view_button");
button.addEventListener("click", () => {
toggleView();
if (!button.dataset.clicked) {
renderList();
button.dataset.clicked = '1';
}
});<button type="button" id="view_button">Click</button>I would use a closure here to keep track of if the item has been clicked.
const button = document.getElementById("view_button");
function toggleView() {
console.log('Toggle View');
}
function renderList() {
console.log('Render List');
}
function clickHandler() {
let hasBeenClicked = false;
return function () {
toggleView();
if (!hasBeenClicked) {
renderList();
hasBeenClicked = true;
}
};
}
button.addEventListener("click", clickHandler());<button id="view_button" type="button">View Button</button>