How to pass multiple parameter in jquery onclick-CodePudding

$(document).ready(function () {
var from='2022-02-21';
var to='2022-02-25';
var category ='rt';
var btndiv = '<div >\
               <input type="button" value="Generate Invoice" id="btngenerateinvoice" onclick="generateinvoice('  from   ','   to   ','   category   ')"  /></div>';
    $(".btndiv").append(btndiv);
});


function generateinvoice(ff, tt, cc) {
    alert("helo");
    var f = ff;
    var t = tt;
    var c = cc
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
                                
</div>

I pass three-parameter on onclick generateinvoice function dynamically but generateinvoice these function not called

CodePudding user response：

The problem is that the values inside onclick="generateinvoice when they are rendered, the code thinks it's variables and those have not been defined. You can add \' in front and after each variable.

so you can do onclick="generateinvoice(\'' from '\',\'' to '\',\'' category '\')"

Without the \' the rendered code could look like generateinvoice(from,to,category), but when you add those the code will render the variables as string,s so it looks like generateinvoice('from','to','category')

Demo

$(document).ready(function() {
  var from = "f",
    to = "t",
    category = "cc";

  var btndiv = '<div >\
               <input type="button" value="Generate Invoice" id="btngenerateinvoice" onclick="generateinvoice(\''  from   '\',\''   to   '\',\''   category   '\')"  /></div>';
  $(".btndiv").append(btndiv);
});


function generateinvoice(ff, tt, cc) {
  alert("helo");
  var f = ff;
  var t = tt;
  var c = cc

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >

</div>