web-dev-qa-db-ja.com

JavaScriptのキャッチされていない参照エラーonclick

ボタンでJavaScript関数を呼び出そうとして、ボタンをクリックしても何も実行されません。デバッガーは「キャッチされない参照エラー:printNumberが定義されていません」を返します。

printNumberは、呼び出したい関数です。

私は検索を行いましたが、この問題を抱えたほとんどの人は、関数の宣言に適切な構文を使用したり、関数を別の関数(スコープ外の関数)内に定義したり、関数を呼び出し後に配置したりしていません。私の頭の中では何も実行されていません。たとえばプロンプトをそこに入れようとしたが、プロンプトが表示されなかった。

これが私のスクリプトです:

    <head>
    <script type="javascript">
    var x=0;
    function addNumber(x){
        x = x + 1;
        return x;   
    }

    function printNumber(number){
        document.getElementById("number").innerHTML=addNumber(number);
    }

    </script>
    </head>

これが私のHTMLです:

    <body>
<p><center><b>The number of times the button has been clicked is ... <b><p>
<br>
<div id="number"></div>
<br>
<form>
    <input type="button" id="StartButton" value="Click to add 1 to counter" onClick="printNumber(x)">
</form>
</center>

誰が問題の原因を私に指摘できますか?ありがとう、これはプログラミングクラス用であり、これに遭遇する可能性のある他の人にも見てほしいと思います。

7
Mr.Clefable

使用する <script type="text/javascript">およびxを希望どおりにインクリメントできないことに注意してください。グローバル変数ではなく、ローカル変数を増分しています。

    <html>
    <head>
        <script type="text/javascript">
        var x=0;
        function addNumber(){
            x = x + 1;
            return x;   
        }
    
        function printNumber(number){
            document.getElementById("number").innerHTML=addNumber();
        }
    
        </script>
        </head>    <body>
    <p><center><b>The number of times the button has been clicked is ... <b><p>
    <br>
    <div id="number"></div>
    <br>
    <form>
        <input type="button" id="StartButton" value="Click to add 1 to counter" onClick="printNumber()">
    </form>
    </center>
    </body>
    </html>
10
teynon