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.
This question is related to
javascript
html
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!
Since the behavior is kind of strange, I have done some testing on the behavior, and here's my result:
If you are:
form
, andonclick="xxx()"
on an elementid="xxx"
or name="xxx"
to that element
Here's are some test and their result:
function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }
_x000D_
<form onsubmit="return false;">
<button onclick="totalbandwidth()">SUCCESS</button>
</form>
_x000D_
function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }
_x000D_
<form onsubmit="return false;">
<button id="totalbandwidth" onclick="totalbandwidth()">FAILED</button>
</form>
_x000D_
function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }
_x000D_
<form onsubmit="return false;">
<button name="totalbandwidth" onclick="totalbandwidth()">FAILED</button>
</form>
_x000D_
function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }
_x000D_
<form onsubmit="return false;">
<input type="button" value="totalbandwidth" onclick="totalbandwidth()" />SUCCESS
</form>
_x000D_
function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }
_x000D_
<button id="totalbandwidth" onclick="totalbandwidth()">SUCCESS</button>
_x000D_
function totalbandwidth(){ alert("The answer is no, the span will not affect button"); }
_x000D_
<form onsubmit="return false;">
<span name="totalbandwidth" >Will this span affect button? </span>
<button onclick="totalbandwidth()">SUCCESS</button>
</form>
_x000D_
Source: Stackoverflow.com