Call funtion on button click event not by id-CodePudding

Hello everyone i am using a function on two buttons with #ID, problem is that i have to write the same function two times, so i want to call it with Onclick, so that i can write a function only one time. please help i am a beginner

buttons

<a name="depIN" id="depIN"  type="button">
<a name="depIN1" id="depIN1"  type="button">

code

$(document).ready(function(){
    $('#depIN').click(function(){
    let network = '';
    if ($('#depsTo').val()){
      network = $('#depsTo').val();
      networkDesign = "";
   
      for (i=0;i<network.length;i  ){
    temp = "<span style = 'border:3px dotted #399bff;'>"   network[i]   "</span>";
    if (i !== network.length-1){
        temp  = "<bold style = 'color : #d77300;'> <i class='fa fa-long-arrow-right'></i></bold>"
    }
    network[i] = temp;
}

      network = network.toString().replaceAll(',','');

    $('#networkHeading').html(network);

    }
    });
});

another same function but different button id

$(document).ready(function(){
    $('#depIN1').click(function(){
    let network = '';
    if ($('#depsTo').val()){
      network = $('#depsTo').val();
      networkDesign = "";
   
      for (i=0;i<network.length;i  ){
    temp = "<span style = 'border:3px dotted #399bff;'>"   network[i]   "</span>";
    if (i !== network.length-1){
        temp  = "<bold style = 'color : #d77300;'> <i class='fa fa-long-arrow-right'></i></bold>"
    }
    network[i] = temp;
}

      network = network.toString().replaceAll(',','');

    $('#networkHeading').html(network);

    }
    });
});

CodePudding user response：

you can use it like this.

<a id="myLink" title="Click to do something" href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text </a>

return false will prevent the browser from following the link

CodePudding user response：

You can do it like this. I have modified the code as well to make it working as required (As per what I understood that what you are trying to achieve)

function addHtml() {
  let network = '';
  if ($('#depsTo').val()) {
    network = $('#depsTo').val();
    networkDesign = "";
    for (i = 0; i < network; i  ) {
      temp = "<span style = 'border:3px dotted #399bff;'>"   i   "</span>";
      if (i !== network - 1) {
        temp  = "<bold style = 'color : #d77300;'> <i class='fa fa-long-arrow-right'></i></bold>";
      }
      networkDesign  = temp;
    }

    $('#networkHeading').html(networkDesign);

  }
}

<link href="https://getbootstrap.com/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a name="depIN"  type="button" onclick="addHtml();return false;">Click depIN</a>
<br>
<br>
<a name="depIN1"  type="button" onclick="addHtml();return false;">Click depIN1</a>
<br>
<br>
<input type="text" value="5" id="depsTo"><!-- I assumed it just to use your code to show you the fianl working -->
<br>
<br>
<div id="networkHeading"></div>

CodePudding user response：

If click events are the same code, you may use jQuery selecter starts with; $('[id^=sameIdStartWith]') It will trigger all IDs starts with depIN, depIN2, depIN3, etc

Demo: https://jsfiddle.net/yeyene/n94au3gt/4/

$(document).ready(function(){
    $('[id^=depIN]').click(function(){
        let network = '';
        if ($('#depsTo').val()){
            network = $('#depsTo').val();
            networkDesign = "";

            for (i=0;i<network.length;i  ){
                temp = "<span style = 'border:3px dotted #399bff;'>"   network[i]   "</span>";
                if (i !== network.length-1){
                    temp  = "<bold style = 'color : #d77300;'> <i class='fa fa-long-arrow-right'></i></bold>"
                }
                network[i] = temp;
            }
            
            network = network.toString().replaceAll(',','');
            $('#networkHeading').html(network);
        }
    });
});

CodePudding user response：

There were many ways:
HTML Code:

<a id="b1"  type="button">B1M</a>
<a id="b2"  type="button">B2M</a>

One is: You can add multiple ids in selector jQuery.

var b1 = $("#b1"), b2 = $("#b2");

b1.add(b2).click(function(){
   alert('clicked', this.id)
})

Here is the link: Fiddle

another one is : You can give same class to all tags

jQuery code:

$(".btnClick").click(function(){
   alert('clicked', this.id)
})

Here is Another Link : Fiddle