CODEWITHSUNDEEP
javascripthtmlreactjs
Aman_Kawatra
Aman_Kawatra

Reputation: 15

Is it possible to have 2 sequential onclick actions for one <a> tag?

I have a problem where if a user clicks on an anchor tag something happens, eg. <a onClick={this.Submission}><Icon/></a> , but now I also want a confirmation box on click of this anchor link, and only if its value is true. So, in short I need two sequential actions to happen on click of one link, first a confirmation box and if its true then the other action.

Upvotes: 0

Views: 1396

Answers (2)

DataCure
DataCure

Reputation: 425

Summarising your question You want to be able to perform two simultanious actions based on a single click

Solution Using an onclick attribute within the anchor element, call a JavaScript function Inside the javascript script, passing this object to the function

Then the function receives the object which we can call el for element and then forward the object onto two other functions as such

HTML

<a onclick="funAnchorClick(this)">Click me</a>

JavaScript

function funAchorClick(el){
    funProcessOne(el);
    funProcessTwo(el);
}
function funProcessOne(el){
    el.style.background="#F00";
}
function funProcessTwo(el){
    el.style.color="FFF";
}

The first function passed the object on to the other 2 functions allowing you to control the same DOM Element from seperate functions

Hope that answers your question

Upvotes: 0

James Ross
James Ross

Reputation: 11

Yes, you can have more than one action occur when you click an tag. You'll just need to call a function that performs two tasks.

Like this:

<a onclick="anchorFunction()">Anchor Tag</a>

<script>
  function anchorFunction() {
    console.log("Action a");
    console.log("Action b");
  }
</script>

Here's a JSFiddle for it if you want to tinker with it.

Upvotes: 1

Related Questions