how can I get the selector string of an HTML node element?

Basically, I am getting an HTML element. I want to do the inverse, from this HTML element, I want to get its selector string (something like this: button#myButton)

function onclicked(e){
 console.log(e.target);  // I get node HTML element
}

suppose I don't know what the id or element is, I will only know this when I click on it.

I need to get the selector string from e.target that is the same of the screenshot.

how can I do it?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function onclicked(e){
  console.log(e.target);
}

<!-- language: lang-html -->

<div>
  <div>
    <div>
      <div>
        <button id="myButton" onclick="onclicked(event)">click</button>
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->

I'll be completely transparent with you here, I'm not entirely sure what you're trying to achieve here. Considering you're using document.querySelector anyway, why aren't you storing the button there? Is there a problem with storing a reference to the actual DOM element as opposed to the query selector string?

I've basically written out a pseudo implementation which I believe provides an answer to your question. Despite the fact that I'm not very confident that I know what you're trying to do or why you want to do it this way.

I strongly recommend you take a look at what I've done & review it, my answer is not a work of art, rather a simple solution to the problem. By all means provide some feedback if this answer doesn't provide the outcome you were looking for. I'm happy to help if I can! 🙂

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const log = console.log;

const cache = {
  element: undefined,
  selector: undefined
};

function onClicked(event) {
  log(event.target);
  const element = event.target;
  cache.element = element;
  cache.selector = element.tagName.toLowerCase() + '#' + element.getAttribute('id');
  log(cache);
}

<!-- language: lang-html -->

<div>
  <div>
    <div>
      <div>
        <button onclick="onClicked(event)" id="myButton">click</button>
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->