CODEWITHSUNDEEP
javascripthtmlevents
Eric Theofanis
Eric Theofanis

Reputation: 41

how to check if element has already been clicked javascript

I'm trying to add multiple event listeners a UL in javascript.

How can I create a condition to .preventDefault() if one of my .card elements has already been clicked? 

const cd = document.getElementById('listDeck')
cd.addEventListener('click', flipFirst, false)


function flipFirst(e) {
  if (e.target && e.target.nodeName == "LI") {
    var firstMove = document.getElementById(e.target.id)
    firstMove.classList.add('open', 'show')
    console.log('first card was clicked')
    e.currentTarget.removeEventListener('click', flipFirst);
  }
}

cd.addEventListener('click', function(evt) {
  if () {
    //condition is true
    //then prevent default
  }   
    var secondMove = document.getElementById(evt.target.id)
    secondMove.classList.add('open', 'show')
    console.log('second card was clicked')
})

Upvotes: 1

Views: 3901

Answers (3)

null
null

Reputation: 1162

Or set a boolean variable in javascript

const cd = document.getElementById('listDeck')
cd.addEventListener('click', flipFirst, false)
var isBtnClicked = false; // <-- Here is variable declared.

function flipFirst(e) {
    if (e.target && e.target.nodeName == "LI") {
        var firstMove = document.getElementById(e.target.id)
        firstMove.classList.add('open', 'show')
        console.log('first card was clicked')
        e.currentTarget.removeEventListener('click', flipFirst);
    }
}

cd.addEventListener('click', function(evt) {
    if () {
        //condition is true
        //then prevent default
    }   

     var secondMove = document.getElementById(evt.target.id)
     secondMove.classList.add('open', 'show')
     console.log('second card was clicked')
     isBtnClicked = true; // <--- Here is the variable

})

Upvotes: 1

Brandon Baker
Brandon Baker

Reputation: 111

A simple way to do it would be to just set a class to the li that was clicked.

function flipFirst(e) {
  if (e.target && e.target.nodeName == "LI") {
    var firstMove = document.getElementById(e.target.id)
    firstMove.classList.add('open', 'show', 'wasClicked') // Add class if clicked
    console.log('first card was clicked')
    e.currentTarget.removeEventListener('click', flipFirst);
  }
}

cd.addEventListener('click', function(evt) {
  if (evt.srcElement.classList.contains('wasClicked') == true) { // check if it has the class
    //then prevent default
  }   
    var secondMove = document.getElementById(evt.target.id)
    secondMove.classList.add('open', 'show')
    console.log('second card was clicked')
})

Upvotes: 1

user398371
user398371

Reputation: 865

Quick solution would be to set a property on evt.currentTarget, which refers to the dom node that the handler is on.

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

Upvotes: 1

Related Questions