De acuerdo, básicamente estoy usando un tipo de botón en HTML, tengo dos botones con diferentes ID como ejemplo:
<button id='Sucky27' class="btn27"></button> <button id='Sucky28' class="btn28"></button>los botones llaman a una función javascript de la siguiente manera:
document.getElementById("Sucky28").addEventListener("click", function() { document.querySelector(".BuildingMenu").style.display = "flex"; })cuando se presiona el botón, se abre un menú de construcción, luego, cuando hace clic en un elemento del menú, es decir, una casa, se ejecuta
document.getElementById("House").addEventListener("click", function() { document.querySelector("function.caller.id").style.backgroundImage = "url(./download.PNG)"; })Me pregunto si hay una manera para que el selector de consulta encuentre la identificación de la persona que llama que inició el menú de construcción, de modo que si id sucky27 abre el menú, usa su identificación y cambia sus propiedades.
Espero haberlo explicado lo suficientemente bien para que lo entiendas.
El controlador de eventos tiene contexto para el elemento al que está adjunto a través de 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>Si desea varios botones con la misma funcionalidad, debe usar una clase, use getElementsByClassName para encontrarlos, luego recorra cada uno y luego asigne el estado al conjunto de datos en el elemento.
[].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>De lo contrario, terminará repitiendo el código para el botón 2
No sé si te sirva, pero yo solía usar hace mucho tiempo localStorage y sessionStorage para guardar este tipo de cosas para usarlas más tarde.
Ejemplo:
document.getElementById("Sucky28").addEventListener("click", function() { sessionStorage.setItem('triggeredBtnId', 'Sucky28'); document.querySelector(".BuildingMenu").style.display = "flex"; })y entonces:
document.getElementById("House").addEventListener("click", function() { const triggeredBtnId = sessionStorage.getItem('triggeredBtnId'); document.querySelector(triggeredBtnId).style.backgroundImage = "url(./download.PNG)"; })esta variable sessionStorage se eliminará automáticamente cuando se cierre el navegador o la pestaña.