there is a button that I am going to add to the page with innerHTML the button has an eventlistener on it onclick="addWatchlist()" and in bellow, I am going to remove the event from the button by another event listener but I can't do it with removeEventListener("click",addWatchlist).
I have readen:
<button class="watch-list-btn" onclick="addWatchlist()">Watchlist </button>
watchlist.addEventListener("click",function(){
conatinerDown.innerHTML =""
conatinerDown.innerHTML +=movieWatchlistArray.map(each=> {
return each.outerHTML
}).join("")
// loop through movie list and changes text and removes event listener.
for(let i=0 ;i<moviePageNumber;i++ ){
document.querySelector(`.movie-${i} .watch-list-btn`).textContent = "remove"
document.querySelector(`.movie-${i} .watch-list-btn`).removeEventListener("click",addWatchlist)
}
})
// adds movie to start of an array called movieWatchlistArray
function addWatchlist(){
movieWatchlistArray.unshift(document.querySelector(`.movie-${moviePageNumber-1}`))
console.log(movieWatchlistArray)
}
is there a way to remove the event? without changing the HTML to something like :
<button class="watch-list-btn">Watchlist </button>
You can get the element and set the onclick attribute to null.
function addWatchlist() {
console.log('addWatchlist');
}
function removeListener() {
const button = document.getElementsByClassName('watch-list-btn')[0];
button.setAttribute('onclick', null);
}<link href="https://cdnjs.cloudflare.com/ajax/libs/marx/4.0.0/marx.min.css" rel="stylesheet"/>
<button class="watch-list-btn" onclick="addWatchlist()">Watchlist</button>
<button onclick="removeListener()">Remove Listener</button><button class="watch-list-btn" id="watch-list-btn">Watchlist </button>
<button class="watch-list-btn" id="remove-event">Watchlist </button>
now you can write the javascript
let btn = document.getElementById('watch-list-btn');
function clickHandler(){
console.log('Clicked')
}
btn.addEventListener('click', clickHandler);
// Remove event on button click
let remove = document.getElementById('remove-event');
remove.addEventListener('click', function(){
btn.removeEventListener('click', clickHandler);
});
This code will work for you.