CODEWITHSUNDEEP
javascript
Hewarathna Ashen Iranga
Hewarathna Ashen Iranga

Reputation: 113

How do you use event.target outside addEventListner?

I am trying to get the event target element outside of the click function. But this not working, I also want to remove event later.

function clicked() {
    let targetElement = clicked.target;
    function action() {
    //Some code here
      }
    }

document.addEventListner('click', clicked);

Upvotes: 0

Views: 933

Answers (4)

Nick
Nick

Reputation: 199

I can try to explain you about hoisting and difference between let and var. But here's an medium article that will give you deep dive in how javascript works.

You'll have clear understanding of how everything interacts and interpreted after reading this article.

You can use this code. As the element is passed as argument to the click function. Which you can pass it to other function as argument. Should work fine.

function clicked(e) { 
     let targetElement = e.target;
     someFunction(targetElement);
 } 

function someFunction(element) {
    //do what you want with element
}

document.addEventListener('click', clicked);

Hope this helps...

Upvotes: 1

nephiw
nephiw

Reputation: 2046

The problem is that the event target exists on the parameter passed to the function, not as a property of the function. Try this code snippet.

function clicked(event) {
    let targetElement = event.target;
    function action() {
        //Some code here
    }
}

document.addEventListener('click', clicked);

There was also a spelling error in addEventListener

Upvotes: 0

Reza Saadati
Reza Saadati

Reputation: 5429

If your goal is to set a variable and use it in another function, your main problem is using let. Do not use let, not const, not var, it's simple: Do not use anything! Just define your variable with myVariable = 'My text'.

Here is a way how you could pass a variable from one function to another:

function clicked() {  
  targetElement = 'I am the element of target';
}

function clickedAgain() {
	console.log(targetElement);
}

document.querySelector('.btn1').addEventListener('click', clicked);
document.querySelector('.btn2').addEventListener('click', clickedAgain);
<button class="btn1">Save the value</button>
<button class="btn2">Rturn the value</button>

Upvotes: 0

Mark Schultheiss
Mark Schultheiss

Reputation: 34196

You did not spell addEventListner correctly.

You can either name the function or call one inside a named function, I also show where the attached point can make a difference.

function clickAction(clickElement) {
  console.log("targetOne:", clickElement);
  //Some other code here
}

function clicked(event) {
  let targetElement = event.target;
  clickAction(targetElement);
}

function clickedMore(event) {
  let targetElement = event.target;
  // where it was attached:
  let attachedElement = event.currentTarget;
  console.log("target:", targetElement, "DelTarget:", attachedElement);
}

document.addEventListener('click', clicked);
document.getElementById('me-more').addEventListener('click', clickedMore);
<div id="me1">Hi Me</div>
<div id="me-more">Hi M outer
  <div class="my-thing">inner thing</div>
  <div class="my-thing">inner thing2</div>
  <div class="my-thing">inner thing 3</div>
</div>

Upvotes: 1

Related Questions