39

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.

Improve this question
3
  • 1
    Please make a JSFiddle link. Commented Mar 25, 2013 at 17:04
  • @coramba just added jsFiddle Commented Mar 25, 2013 at 17:08
  • @rid - sorry, line 71 is the onclick button with value totalbandwidthresult Commented Mar 25, 2013 at 17:08

4 Answers 4

Reset to default
58

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

why by changing the name fixed the problem?
@StevenHernandez - they conflicted. Once the names were changed the conflict was resolved.
yes I see your point. thanks! I suppose JS is very delicate about naming conventions so we have to try to make every name unique.
totalbandwidthresult function name is conflicted so we need to change function name.
Gah I just had the same problem, been trying to debug it for hours, glad this question existed thank you.
28

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>

Improve this answer

3 Comments

The reason is that inside a HTML form and just inside a HTML form, the onclick() JavaScript block will get a scope injected which holds all other input elements of the form. So the element with the name "xxx" shadows the global function with the name "xxx". See also medium.com/analytics-vidhya/…
oh man the element name + function name conflict got me a few times
Your advice don't add id or name resolved my issue.
5

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!

Improve this answer

Comments

0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.