JS: Uncaught TypeError: object is not a function (onclick)
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"
orname="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>
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>