CODEWITHSUNDEEP
javascriptdom-eventsaddeventlistenerremoveeventlistener
Jan Radosta
Jan Radosta

Reputation: 157

removeEventListener on class name after one click

I'm trying to write some Javascript to get click event on all elements with class from an array. Everything works fine, but I need it unclickable only until second condition in klikej() function is met. Once the click event fires, then the item with that class shouldn't be clickable. I've tried using removeEventListener and/or handle it with PreventDefaults(), but nothing works. I need to use only vanilla Javascript - no jQuery or anything else. Could you please help me? 

    poleRandomKaret.forEach(karta => {
    document.querySelectorAll(`.${karta}`).forEach(element => {
        element.addEventListener('click', event => {
            console.log("klik");
            klikej(event, element);
        });
    });
});


function klikej(event, element) {
    let kliknuteKarty = document.querySelectorAll('[data-ovoce]');
    if (kliknuteKarty.length < 2) {
        element.setAttribute('data-ovoce', 'otoceno');
    }
    kliknuteKarty = document.querySelectorAll('[data-ovoce]');
    if (kliknuteKarty.length === 2) {
        kliknuteKarty[0].className === kliknuteKarty[1].className ? console.log("yes") : console.log("nope");
        kliknuteKarty.forEach(element => {
            element.removeAttribute("data-ovoce");
        });
    }
}

EDIT: The item shouldn't be clickable until the second condition in klikej() function is met. I'm trying to do memory game using vanilla JS. Function klikej() sets data attribute to an item and once there are two items with identical data attributes, it'll print in console "yes". If they're two different data attributes, they needs to be clickable again.

Upvotes: 0

Views: 1136

Answers (2)

Liniik
Liniik

Reputation: 60

If you remove event listener, and will need to listen again, you would need to add it again or listen with something else. If I would need to recognize if something was clicked, I would add property to the element in the listener callback, so something like:

// before anything else we check if it was clicked before
if (element.clicked) {
    // do your magic when element was already clicked
} else {
    // do different magic with not yet opened element here
}
// after you did everything needed
// set the clicked attribute to true or false (if you need "unclick" it)
element.clicked = true;

It isn't directly answer to your question but hopefully another view to possible solution - if I understood you correctly, you do something when it was clicked and something else when it wasn't yet clicked and here you have control for both cases.

Upvotes: 1

Sajeeb Ahamed
Sajeeb Ahamed

Reputation: 6418

You can add an option called once as the third parameter of the addEventListener, which makes the event listener execute once.

element.addEventListener('click', function(e){
    console.log('clicked'); // This will be executed once.
}, {once: true});

Upvotes: 1

Related Questions