Html JS：未捕获的类型错误：对象不是函数（onclick）

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

提问by itamar

Edit:Here's a JSfiddle

编辑：这是一个 JSfiddle

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

Edit2：错误在这一行：<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

试图让一个按钮执行计算。所需的变量如下，以及其中的 HTML

I am getting an error onclick: Uncaught TypeError: object is not a function index.html:71 onclick

我在点击时遇到错误： Uncaught TypeError: object is not a function index.html:71 onclick

Here is my Javascript

这是我的 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:

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.

基本上 - 我在 JS 中使用的语法似乎有问题 - 但我不确定。

回答by Nilesh patel

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>

回答by Ng Sek Long

Since the behavior is kind of strange, I have done some testing on the behavior, and here's my result:

由于行为有点奇怪，我对行为做了一些测试，这是我的结果：

TL;DR

TL; 博士

If you are:

如果你是：

• In a form, and
• uses onclick="xxx()"on an element
• don'tadd id="xxx"or name="xxx"to that element
  • (e.g. <form><button id="totalbandwidth" onclick="totalbandwidth()">BAD</button></form>)

• 在form, 和
• 使用onclick="xxx()"的元件上
• 不要添加id="xxx"或name="xxx"到该元素
  • （例如<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)

给按钮添加id （调用函数失败）

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)

给按钮添加id，但不是在表单中（可以成功调用函数）

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)

给表单内的另一个元素添加id （可以成功调用函数）

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>

回答by itamar

I was able to figure it out by following the answer in this thread: https://stackoverflow.com/a/8968495/1543447

我能够通过遵循此线程中的答案来弄清楚：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!

基本上，我将所有值、函数名称和元素名称重命名为不同的值，这样它们就不会发生冲突 - 并且它起作用了！