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

Question

Edit: Here's a JSfiddle

Edit2: The error is on this line: <input type="button" value="totalbandwidthresult" onclick="javascript:totalbandwidth();">

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:

<form name="calculator" class="formtable">   <div class="formrow"><label for="rcname">RC Name</label> <input type="text" name="rcname"></div>   <div class="formrow"><label for="fps">FPS</label> <input type="text" name="fps">  </div>   <div class="formrow"><label for="bitrate">Bitrate</label> <input type="text" name="bitrate">  </div>   <div class="formrow"><label for="numberofcameras">Number of Cameras</label> <input type="text" name="numberofcameras"> </div>    <div class="formrow"><label for="encoding">Encoding</label> <select name="encoding" id="encodingoptions">   <option value="h264">H.264</option>   <option value="mjpeg">MJPEG</option>   <option value="mpeg4">MPEG4</option> </select></div>   Total Storage: <input type="text" name="totalstorage">    Total Bandwidth: <input type="text" name="totalbandwidth">    <input type="button" value="totalbandwidthresult" onclick="javascript:totalbandwidth();">   

Basically - it seems that there may be something wrong with the syntax I used in the JS - but I'm not sure.

Answer 1

Please change only the name of the function; no other change is required

<script>     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;     } </script>  <form name="calculator" class="formtable">     <div class="formrow">         <label for="rcname">RC Name</label>         <input type="text" name="rcname">     </div>     <div class="formrow">         <label for="fps">FPS</label>         <input type="text" name="fps">     </div>     <div class="formrow">         <label for="bitrate">Bitrate</label>         <input type="text" name="bitrate">     </div>     <div class="formrow">         <label for="numberofcameras">Number of Cameras</label>         <input type="text" name="numberofcameras">     </div>     <div class="formrow">         <label for="encoding">Encoding</label>         <select name="encoding" id="encodingoptions">             <option value="h264">H.264</option>             <option value="mjpeg">MJPEG</option>             <option value="mpeg4">MPEG4</option>         </select>     </div>Total Storage:     <input type="text" name="totalstorage">Total Bandwidth:     <input type="text" name="totalbandwidth">     <input type="button" value="totalbandwidthresult" onclick="totalbandwidthresult();"> </form> 

Answer 2

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="xxx()" on an element
• don't add id="xxx" or name="xxx" to that element
  • (e.g. <form><button id="totalbandwidth" onclick="totalbandwidth()">BAD</button></form> )

---

Here's are some test and their result:

Control sample (can successfully call function)

function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }

<form onsubmit="return false;">   <button onclick="totalbandwidth()">SUCCESS</button> </form>

Add id to button (failed to call function)

function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }

<form onsubmit="return false;">   <button id="totalbandwidth" onclick="totalbandwidth()">FAILED</button> </form>

Add name to button (failed to call function)

function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }

<form onsubmit="return false;">   <button name="totalbandwidth" onclick="totalbandwidth()">FAILED</button> </form>

Add value to button (can successfully call function)

function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }

<form onsubmit="return false;">   <input type="button" value="totalbandwidth" onclick="totalbandwidth()" />SUCCESS </form>

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

function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }

<button id="totalbandwidth" onclick="totalbandwidth()">SUCCESS</button>

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

function totalbandwidth(){ alert("The answer is no, the span will not affect button"); }

<form onsubmit="return false;"> <span name="totalbandwidth" >Will this span affect button? </span> <button onclick="totalbandwidth()">SUCCESS</button> </form>