how do i get which href is clicked in Javascript-CodePudding

Below is my HTML code, how do I get the value of selected tag here

  <div id="myDropdownOptions" onclick="logType()">
          <a href="#about">about</a>
          <a href="#base">base</a>
          <a href="#blog">blog</a>
        </div>

CodePudding user response：

The target property of the global Event object will give you the clicked element.

You can then use textContent to get the text from it (assuming that is what you want, only form controls (like input elements) have values.

function logType() {
    console.log(event.target.textContent);
}

<div id="myDropdownOptions" onclick="logType()">
  <a href="#about">about</a>
  <a href="#base">base</a>
  <a href="#blog">blog</a>
</div>

Note that the global Event object is deprecated, so you should replace your onclick attribute with the addEventListener method and use the event object that is passed as the first argument to the callback instead.

function logType(event) {
    console.log(event.target.textContent);
}

document
    .querySelector("#myDropdownOptions")
    .addEventListener("click", logType);

<div id="myDropdownOptions">
  <a href="#about">about</a>
  <a href="#base">base</a>
  <a href="#blog">blog</a>
</div>