Pass a string parameter in an onclick function

Question

I would like to pass a parameter  i e  a string  to an Onclick function  For the moment  I do this    lt input type  quot button quot  onClick  quot gotoNode     result name      quot    gt    with result name for example equal to string  quot Add quot   When I click on this button  I have an error that says that  quot Add is not defined quot   Since this function call works perfectly with a numeric parameter  I assume that it has something to do with the symbols  quot  quot  in the string  How can I fix this problem

User · Answer

Try this    HTML   lt button id  quot a1 quot  type  quot button quot  onclick  quot return a1 onclick  a1   quot  gt a1 lt  button gt   JavaScript   lt script language  quot javascript quot  type  quot text javascript quot  gt      function a1 onclick id            document getElementById id  style backgroundColor    quot  F00 quot          lt  script gt   Note  be sure of sending arguments between     signs like   a1   in HTML code

User · Answer

In Razor  you can pass parameters dynamically   lt a href  javascript void 0    onclick  showtotextbox  Model UnitNameVMs i  UnitNameID   quot  Model UnitNameVMs i  FarName quot   quot  Model UnitNameVMs i  EngName quot   quot  Model UnitNameVMs i  Symbol quot      gt  Model UnitNameVMs i  UnitNameID lt  a gt

User · Answer

You can pass a reference or string value  Just put the function inside the double commas  quot  quot  as per the below snapshot

User · Answer

Multiple parameters  bounds extend marker position   bindInfoWindow marker  map  infowindow        lt b gt     response i  driver name     lt  b gt  lt br gt           lt b gt     moment response i  updated at  fromNow       lt  b gt        lt button onclick  quot myFunction       response i  id             driversList        quot  gt Click me lt  button gt

User · Answer

A couple of concerns for me with respect to using string escape in onClick and as the number of arguments grow  it will become cumbersome to maintain  The following approach will have a one hop - On click - take the control to a handler method and handler method  based on the event object  can deduct the click event and corresponding object  It also provides a cleaner way to add more arguments and have more flexibility   lt button type  quot button quot          className  quot btn btn-default quot          onClick  quot invoke quot          name  gotoNode          data-arg1  1234  gt GotoNode lt  button gt   In the JavaScript layer    invoke    event    gt        let nameOfFunction   this event target name       let arg1   event target getAttribute  data-arg1           We can add more arguments as needed        window nameOfFunction  arg1         Hope the function is in the window         Else the respective object need to be used             The advantage here is that we can have as many arguments  in above example  data-arg1  data-arg2  etc   as needed

User · Answer

If you are adding buttons or link dynamically and facing the issue then this may be help  I solved it by this way  var link    contentData1 i   find  quot td first font b a quot   attr  quot href quot   javascript onClick openWin       tdText            I am new to HTML  jQuery and JavaScript  So maybe my code will not be optimized or syntax  but it was working for me

User · Answer

You can use this code in your button onclick method    lt button class  btn btn-danger  onclick  cancelEmployee     cancelButtonID        gt  Cancel  lt  button gt

User · Answer

If you are using ASP NET you can use JavaScript  HTML  lt input type  button  value  test  onclick  javascript  EditSelectedOptionName x y     gt  quot   JavaScript function EditSelectedOptionName id  name        console log id       console log name

User · Answer

If to use for generation of a set of buttons with different parameters of handlers  JavaScript Closures let some button   document createElement   quot button quot     some button type    quot button quot    some button onclick   doWithParam  some param     function doWithParam  param        return function            alert  param        lt -- Your code here          If we do  some button onclick   foo  some param    function foo  param        alert  param       then function foo starts after every updating page  If we do  for  let i   0  i  lt  10    i        var inputElement   document createElement  input        inputElement type    quot button quot      inputElement addEventListener  click   function            gotoNode result name                 document body appendChild inputElement       then for all buttons created in the loop  the last value of the parameter is  quot result name quot

User · Answer

This is a nice and neat way to send a value or object   lt  DOCTYPE html gt   lt html gt       lt body gt           lt h1  onclick  quot test  wow  this  quot  gt Click on this text  lt  h1 gt           lt script gt              var test   function value object                    object innerHTML  value                          lt  script gt       lt  body gt   lt  html gt

User · Answer

For passing multiple parameters you can cast the string by concatenating it with the ASCII value  Like  for single quotes we can use  amp  39   var str    quot  amp  39  quot    str    quot  amp  39  quot    The same parameter you can pass to the onclick   event  In most of the cases it works with every browser

User · Answer

The following works for me very well    lt html gt   lt head gt       lt title gt HTML Form lt  title gt   lt  head gt   lt body gt       lt form gt           lt input type  button  value  ON  onclick  msg  ON    gt           lt input type  button  value  OFF  onclick  msg  OFF    gt       lt  form gt       lt script gt          function msg x               alert x                  lt  script gt   lt  body gt   lt  html gt

User · Answer

Not escaping double quotes is the cause of OP s problem  A readable approach to escape double quotes is using backticks  MDN   Here is a sample solution  my btn setAttribute  onclick    my func  quot   onclick var1  quot    quot   onclick var2  quot

User · Answer

If the requirement is to reference the global object  JavaScript  in your HTML code  you can try this   Don t use any quotes    or  quot   around the variable  Fiddle reference  JavaScript  var result    name   hello    function gotoNode name        alert name      HTML   lt input value  quot Hello quot  type  quot button quot  onClick  quot gotoNode result name  quot    gt

User · Answer

It looks like you re building DOM elements from strings  You just need to add some quotes around result name     lt input type  button  onClick  gotoNode       result name           gt     You should really be doing this with proper DOM methods though   var inputElement   document createElement  input    inputElement type    button  inputElement addEventListener  click   function        gotoNode result name         document body appendChild inputElement      Just be aware that if this is a loop or something  result will change before the event fires and you d need to create an additional scope bubble to shadow the changing variable

User · Answer

I suggest not even using HTML onclick handlers  and use something more common such as document getElementById   HTML    lt input type  button  id  nodeGoto    gt    JavaScript   document getElementById  nodeGoto   addEventListener  click   function         gotoNode result name      false

User · Answer

I am guessing  you are creating a button using JavaScript itself  So  the error in your code is that  it will render in this form   lt input type  button  onClick  gotoNode add     gt     At this current state  add will be considered as an identifier like variables or function calls  You should escape the value like this    lt input type  button  onClick  gotoNode       result name           gt

User · Answer

If your button is generated dynamically  You can pass string parameters to JavaScript functions like the below code  I passed three parameters where the third one is a string parameter  var btn   quot  lt input type  button  onclick  RoomIsReadyFunc  quot  ID  quot   quot  RefId  quot    quot  quot  YourString  quot   quot      value  Room is Ready    gt  quot       Your JavaScript function  function RoomIsReadyFunc ID  RefId  YourString      alert ID     alert RefId     alert YourString

User · Answer

If you need to pass a variable along with the  this  keyword  the below code works  var status    Active   var anchorHTML     lt a href   quot   quot  onClick    quot DisplayActiveStatus this       status        quot  gt     data    lt  a gt

User · Answer

lt style type  quot text css quot  gt       userprofile          display  inline-block          padding  15px 25px          font-size  24px          cursor  pointer          text-align  center          text-decoration  none          outline  none          color   FFF          background-color   4CAF50      C32836         border  none          border-radius  15px          box-shadow  0 9px  999          width  200px          margin-bottom  15px             userprofile hover           background-color   3E8E41             userprofile active           background-color   3E8E41          box-shadow  0 5px  666          transform  translateY 4px               array           border-radius  15px 50px          background   4A21AD          padding  20px          width  200px          height  900px          overflow-y  auto         lt  style gt   if  data i  socketid     quot  quot            quot  array quot   append  quot  lt button type  button  id  userprofile  class  green button  name  quot    data i   id    quot  onClick  chatopen name   gt  quot    data i  username    quot  lt  button gt  lt  br gt  quot      else       console log  null socketid   gt  gt       quot  userprofile quot   css  background-color              quot  userprofile quot   css  background-color     C32836   important            quot  array quot   append  quot  lt button type  button  id  userprofile  class  red button  name  quot    data i   id    quot  onClick  chatopen name   gt  quot    data i  username  quot  lt  button gt  lt  br gt  quot           quot  red button quot   css  background-color    C32836

User · Answer

Here is a jQuery solution that I m using  jQuery    quot  slideshow button quot   click function        var val     this  val        console log val        HTML  lt div id  quot slideshow quot  gt       lt img src  quot image1 jpg quot  gt       lt button class  quot left quot  value  quot back quot  gt  amp  10094  lt  button gt       lt button class  quot right quot  value  quot next quot  gt  amp  10095  lt  button gt   lt  div gt

User · Answer

lt  ----  script ---- gt   lt script gt  function myFunction x      document getElementById  quot demo quot   style backgroundColor   x      lt  script gt    lt  ---- source ---- gt   lt p id  quot demo quot  style  quot width 20px height 20px border 1px solid  ccc quot  gt  lt  p gt    lt  ----  buttons  amp  function call ---- gt    lt a  onClick  quot myFunction  red   quot    gt RED lt  a gt    lt a  onClick  quot myFunction  blue   quot    gt BLUE lt  a gt    lt a  onClick  quot myFunction  black   quot    gt BLACK lt  a gt

User · Answer

let task            lt button onclick  quot myFunction    task    quot  gt Continue task lt  button gt  lt  li gt

User · Answer

Also you can use the grave accent symbol       in a string Try    lt input type  quot button quot  onClick  quot gotoNode    result name    quot    gt    For more information  visit MDN and Stack Overflow  By Chrome  Edge  Firefox  Gecko   Opera  Safari support  but it does not support Internet Explorer

User · Answer

You can use this    lt input id  quot test quot  type  quot button quot  value  quot     result name     quot    gt      document   on  click    quot  test quot   function          alert   this  val          It worked for me

[javascript] Pass a string parameter in an onclick function

Examples related to javascript

Examples related to html