Is there a javascript function that finds the callers id

Question

Okay so basically I'm using a button type in HTML, I have two buttons with different id's as an example:

<button id='Sucky27' class="btn27"></button>
<button id='Sucky28' class="btn28"></button>

the buttons call a javascript function as follows:

document.getElementById("Sucky28").addEventListener("click", function() {
document.querySelector(".BuildingMenu").style.display = "flex";
})

when the button is pressed it opens a building menu then when you click on an item in the menu ie a house this gets runned

document.getElementById("House").addEventListener("click", function() {
document.querySelector("function.caller.id").style.backgroundImage = "url(./download.PNG)";
})

I'm wondering if there's a way for the querySelector to find the id of the caller which initiated the building menu so if id sucky27 opens the menu it uses its id and changes the its properties

I hope I explained it well enough for you to understand

The value of `this` in the event handler will be a reference to the element. You don't need the id. — Pointy, Dec 22 '21 at 23:29
@Pointy what do you mean by that, if you mind elaborating, as I'm quite new to javascript, — Meh., Dec 22 '21 at 23:37

score 1 · Answer 1 · answered Dec 22 '21 at 23:41

The event handler has context to the element it is attached to via this.

const exampleBtn = document.getElementById("example");

let clicked = false;
exampleBtn.addEventListener("click", function(evt) {
  this.style.backgroundColor = clicked ? "green" : "red";
  clicked = !clicked;
});

<button id="example">Click</button>

score 0 · Answer 2 · answered Dec 22 '21 at 23:51

If you want multiple buttons with the same functionality, you should use a class, use getElementsByClassName to find them, then loop over each and then assign the state to dataset on the element.

[].forEach.call(document.getElementsByClassName('btn-coloured'), function (el) {
  el.addEventListener("click", function(evt) {
    this.style.backgroundColor = this.dataset.clicked ? "green" : "red";
    this.dataset.clicked = !this.dataset.clicked;
  })
});

<button class="btn-coloured">Click</button>
<button class="btn-coloured">Click</button>
<button class="btn-coloured">Click</button>

Else you will end up repeating code for button 2

score -1 · Answer 3 · answered Dec 22 '21 at 23:42

I don´t know if it helps to you, but I used to use long time ago the localStorage and sessionStorage to save this kind of things for using it later.

Example:

document.getElementById("Sucky28").addEventListener("click", function() {
sessionStorage.setItem('triggeredBtnId', 'Sucky28');
document.querySelector(".BuildingMenu").style.display = "flex";
})

and then:

document.getElementById("House").addEventListener("click", function() {
const triggeredBtnId = sessionStorage.getItem('triggeredBtnId');
document.querySelector(triggeredBtnId).style.backgroundImage = "url(./download.PNG)";
})

this sessionStorage variable will be deleted automatically when the browser or tab is closed.

Uncaught TypeError: Cannot read properties of null (reading 'style') is what I'm getting — Meh., Dec 22 '21 at 23:58
This is overkill (and will break on some browser configurations) – you can just use a variable. — Ry-, Dec 23 '21 at 00:28

Is there a javascript function that finds the callers id

3 Answers3