Js: Uncaught Typeerror: Object Is Not A Function (onclick)

Edit: Here's a JSfiddle Edit2: The error is on this line: Trying to have a button p

Solution 1:

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

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

Solution 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)

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

<formonsubmit="return false;"><buttononclick="totalbandwidth()">SUCCESS</button></form>

Add id to button (failed to call function)

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

<formonsubmit="return false;"><buttonid="totalbandwidth"onclick="totalbandwidth()">FAILED</button></form>

Add name to button (failed to call function)

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

<formonsubmit="return false;"><buttonname="totalbandwidth"onclick="totalbandwidth()">FAILED</button></form>

Add value to button (can successfully call function)

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

<formonsubmit="return false;"><inputtype="button"value="totalbandwidth"onclick="totalbandwidth()" />SUCCESS
</form>

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

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

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

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

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

<formonsubmit="return false;"><spanname="totalbandwidth" >Will this span affect button? </span><buttononclick="totalbandwidth()">SUCCESS</button></form>

Solution 3:

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!

Solution 4:

This Kind of Problem happens if you have a capital letter in your Function so change it to a small letter words. It will work or else make the name of the Function short