CODEWITHSUNDEEP
javascriptdom
R. Bright
R. Bright

Reputation: 191

How to find out the element where a function was called from (Javascript)

Here is my my HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 <link rel = "stylesheet" type="text/css" href="styles/css/style.css" />
</head>
<body>
<div>
    <select class="option_block" size="5" multiple="1">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
            <option>Option 4</option>
            <option>Option 5</option>
       </select>

       <div class="button_block" multiple="1">

            <button class="move_button" id="MoveAllToRight">>></button>
            <button class="move_button" id="MoveToRight">></button>
            <button class="move_button" id="MoveToLeft"><</button>
            <button class="move_button" id="MoveAllToLeft"><<</button>

       </div>

    <select class="option_block" size="5"></select>

</div>

<script src="scripts/javascript/script.js"></script>
</body>
</html>

Adh here is my JS-script:

(function(){

function move(direction) {
..........
}

function moveAll(direction) {
...........
}


document.getElementById("MoveAllToRight").addEventListener("click", function () {
    moveAll('ToRight');
});

document.getElementById("MoveToRight").addEventListener("click", function () {
    move('ToRight');
});

document.getElementById("MoveToLeft").addEventListener("click", function () {
    move('ToLeft');
});

document.getElementById("MoveAllToLeft").addEventListener("click", function () {
    moveAll('ToLeft');
});


})();

I decided not to show contain of move and moveAll functon because it's obviously excessive information.

How can I get access to "div" that contains both elements inside move and moveAll functions ? I have a solution with using of "ID"'s, but it's not scalable.

Upvotes: 2

Views: 1686

Answers (2)

karina
karina

Reputation: 805

Unless you bind your event listeners to something else explicitly the 'this' keyword will become the element from which the event was triggered.

So you should be able to access the parent div by doing 

this.parentElement

Or figure out how to walk the Dom with whatever library you are working with

Upvotes: 1

Asaf David
Asaf David

Reputation: 3297

document.getElementById("MoveAllToRight").addEventListener("click", function(event) {
    moveAll(event, 'ToRight');
});

Inside the function event.target will show you the element from which the event was invoked.

Upvotes: 1

Related Questions