Anchor tag clicks to differentiate within same onClick Javascript function

Question

I have a simple anchor tag as below:

<a onclick="{!c.handleClick}" >Major</a>
<a onclick="{!c.handleClick}" >Minor</a>

Within handleClick function, I am performing DML operations that are common for both urls. Then I am trying to differentiate Major/Minor clicks and perform necessary actions and then redirect to respective file. May I know what element I can add to the tag and make the clicks differentiable?

Answer 1

You could add an ID to each anchor and then target based off that:

function handleClick(e) {
  e.preventDefault();
  const id = e.target.id;
  if (id === 'major') {
    console.log('Major clicked');
  } else {
    console.log('Minor clicked');
  }
}

<a href="#" onclick="handleClick(event)" id="major">Major</a>
<a href="#" onclick="handleClick(event)" id="minor">Minor</a>