JS Uncaught TypeError object is not a function onclick

Question

Edit  Here s a JSfiddle  Edit2  The error is on this line   lt input type  button  value  totalbandwidthresult  onclick  javascript totalbandwidth     gt     Trying to have a button perform a calculation  The required variables are below  as well as the HTML where   I am getting an error onclick  Uncaught TypeError  object is not a function index html 71 onclick  Here is my Javascript  function totalbandwidth           var fps Number document calculator fps value         var bitrate Number document calculator bitrate value         var numberofcameras   Number document calculator numberofcameras value        var encoding   document calculator encoding value       if  encoding    mjpeg                 storage   bitrate fps            else               storage   bitrate             totalbandwidth    numberofcameras   storage    1000      document calculator totalbandwidthresult value   totalbandwidth          The HTML    lt form name  calculator  class  formtable  gt     lt div class  formrow  gt  lt label for  rcname  gt RC Name lt  label gt   lt input type  text  name  rcname  gt  lt  div gt     lt div class  formrow  gt  lt label for  fps  gt FPS lt  label gt   lt input type  text  name  fps  gt    lt  div gt     lt div class  formrow  gt  lt label for  bitrate  gt Bitrate lt  label gt   lt input type  text  name  bitrate  gt    lt  div gt     lt div class  formrow  gt  lt label for  numberofcameras  gt Number of Cameras lt  label gt   lt input type  text  name  numberofcameras  gt   lt  div gt      lt div class  formrow  gt  lt label for  encoding  gt Encoding lt  label gt   lt select name  encoding  id  encodingoptions  gt     lt option value  h264  gt H 264 lt  option gt     lt option value  mjpeg  gt MJPEG lt  option gt     lt option value  mpeg4  gt MPEG4 lt  option gt   lt  select gt  lt  div gt    Total Storage   lt input type  text  name  totalstorage  gt     Total Bandwidth   lt input type  text  name  totalbandwidth  gt      lt input type  button  value  totalbandwidthresult  onclick  javascript totalbandwidth     gt         Basically - it seems that there may be something wrong with the syntax I used in the JS - but I m not sure

User · Answer

Since the behavior is kind of strange  I have done some testing on the behavior  and here s my result  TL DR If you are   In a form  and uses onclick  quot xxx   quot  on an element don t add id  quot xxx quot  or name  quot xxx quot  to that element   e g   lt form gt  lt button id  quot totalbandwidth quot  onclick  quot totalbandwidth   quot  gt BAD lt  button gt  lt  form gt        Here s are some test and their result  Control sample  can successfully call function   x000D   x000D  function totalbandwidth    alert  Total Bandwidth  gt  9000Mbps      x000D   lt form onsubmit  return false   gt     lt button onclick  totalbandwidth    gt SUCCESS lt  button gt   lt  form gt  x000D   x000D   x000D   Add id to button  failed to call function   x000D   x000D  function totalbandwidth    alert  Total Bandwidth  gt  9000Mbps      x000D   lt form onsubmit  return false   gt     lt button id  totalbandwidth  onclick  totalbandwidth    gt FAILED lt  button gt   lt  form gt  x000D   x000D   x000D   Add name to button  failed to call function   x000D   x000D  function totalbandwidth    alert  Total Bandwidth  gt  9000Mbps      x000D   lt form onsubmit  return false   gt     lt button name  totalbandwidth  onclick  totalbandwidth    gt FAILED lt  button gt   lt  form gt  x000D   x000D   x000D   Add value to button  can successfully call function   x000D   x000D  function totalbandwidth    alert  Total Bandwidth  gt  9000Mbps      x000D   lt form onsubmit  return false   gt     lt input type  button  value  totalbandwidth  onclick  totalbandwidth      gt SUCCESS  lt  form gt  x000D   x000D   x000D   Add id to button  but not in a form  can successfully call function   x000D   x000D  function totalbandwidth    alert  Total Bandwidth  gt  9000Mbps      x000D   lt button id  totalbandwidth  onclick  totalbandwidth    gt SUCCESS lt  button gt  x000D   x000D   x000D   Add id to another element inside the form  can successfully call function   x000D   x000D  function totalbandwidth    alert  The answer is no  the span will not affect button      x000D   lt form onsubmit  return false   gt   lt span name  totalbandwidth   gt Will this span affect button   lt  span gt   lt button onclick  totalbandwidth    gt SUCCESS lt  button gt   lt  form gt  x000D   x000D   x000D

User · Answer

Please change only the name of the function  no other change is required   lt script gt      function totalbandwidthresult             alert  fdf            var fps   Number document calculator fps value           var bitrate   Number document calculator bitrate value           var numberofcameras   Number document calculator numberofcameras value           var encoding   document calculator encoding value          if  encoding    mjpeg                 storage   bitrate   fps            else               storage   bitrate                     totalbandwidth    numberofcameras   storage    1000          alert totalbandwidth           document calculator totalbandwidthresult value   totalbandwidth         lt  script gt    lt form name  calculator  class  formtable  gt       lt div class  formrow  gt           lt label for  rcname  gt RC Name lt  label gt           lt input type  text  name  rcname  gt       lt  div gt       lt div class  formrow  gt           lt label for  fps  gt FPS lt  label gt           lt input type  text  name  fps  gt       lt  div gt       lt div class  formrow  gt           lt label for  bitrate  gt Bitrate lt  label gt           lt input type  text  name  bitrate  gt       lt  div gt       lt div class  formrow  gt           lt label for  numberofcameras  gt Number of Cameras lt  label gt           lt input type  text  name  numberofcameras  gt       lt  div gt       lt div class  formrow  gt           lt label for  encoding  gt Encoding lt  label gt           lt select name  encoding  id  encodingoptions  gt               lt option value  h264  gt H 264 lt  option gt               lt option value  mjpeg  gt MJPEG lt  option gt               lt option value  mpeg4  gt MPEG4 lt  option gt           lt  select gt       lt  div gt Total Storage       lt input type  text  name  totalstorage  gt Total Bandwidth       lt input type  text  name  totalbandwidth  gt       lt input type  button  value  totalbandwidthresult  onclick  totalbandwidthresult     gt   lt  form gt

User · Answer

I was able to figure it out by following the answer in this thread  https   stackoverflow com a 8968495 1543447  Basically  I renamed all values  function names  and element names to different values so they wouldn t conflict - and it worked

[javascript] JS: Uncaught TypeError: object is not a function (onclick)

TL;DR

Control sample (can successfully call function)

Add id to button (failed to call function)

Add name to button (failed to call function)

Add value to button (can successfully call function)

Add id to button, but not in a form (can successfully call function)

Add id to another element inside the form (can successfully call function)

Examples related to javascript

Examples related to html