37

編集： これがJSfiddleです

Edit2：エラーは次の行にあります：<input type="button" value="totalbandwidthresult" onclick="javascript:totalbandwidth();">

ボタンに計算を実行させようとしています。必要な変数は以下のとおりです。

クリック時にエラーが発生します：Uncaught TypeError: object is not a function index.html:71 onclick

これが私の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;  
}

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();">

基本的に、JSで使用した構文に問題があるようですが、よくわかりません。

4

4 に答える 4

55

関数の名前のみを変更してください。他の変更は必要ありません

<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>
于 2013-03-25T17:38:50.287 に答える
20

動作が奇妙なため、動作をテストしました。結果は次のとおりです。

TL; DR

あなたがいる場合：

  • でform、そして
  • onclick="xxx()"要素で使用
  • その要素 にid="xxx"またはを追加しないでくださいname="xxx"
    • （例：<form> <button id = "totalbandwidth" onclick = "totalbandwidth（）"> BAD </ button> </ form>）

これがいくつかのテストとその結果です：

コントロールサンプル（関数を正常に呼び出すことができます）

function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }
<form onsubmit="return false;">
  <button onclick="totalbandwidth()">SUCCESS</button>
</form>

ボタンにIDを追加します（関数の呼び出しに失敗しました）

function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }
<form onsubmit="return false;">
  <button id="totalbandwidth" onclick="totalbandwidth()">FAILED</button>
</form>

ボタンに名前を追加します（関数の呼び出しに失敗しました）

function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }
<form onsubmit="return false;">
  <button name="totalbandwidth" onclick="totalbandwidth()">FAILED</button>
</form>

ボタンに値を追加します（関数を正常に呼び出すことができます）

function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }
<form onsubmit="return false;">
  <input type="button" value="totalbandwidth" onclick="totalbandwidth()" />SUCCESS
</form>

ボタンにIDを追加しますが、フォームには追加しません（関数を正常に呼び出すことができます）

function totalbandwidth(){ alert("Total Bandwidth > 9000Mbps"); }
<button id="totalbandwidth" onclick="totalbandwidth()">SUCCESS</button>

フォーム内の別の要素に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>

于 2019-09-09T04:21:27.967 に答える
4

私はこのスレッドの答えに従うことによってそれを理解することができました：https ：//stackoverflow.com/a/8968495/1543447

基本的に、競合しないように、すべての値、関数名、要素名の名前を別の値に変更しました。これでうまくいきました。

于 2013-03-25T17:36:24.250 に答える
0

この種の問題は、関数に大文字がある場合に発生するため、小文字の単語に変更してください。それは機能するか、そうでなければ関数の名前を短くします

于 2021-05-28T05:54:28.843 に答える