トップ > JavaScript > 使えないメソッド名があることを知りました

使えないメソッド名があることを知りました

JavaScript

ある JavaScript の入門サイト見ていて写経してたんですが、どうやっても動いてくれない・・・。具体的にはボタンのクリックイベントだったのですが、サイトとソースコードを見比べても合っているんですよ！なんでダメなの？？

困ったのがエラー発生するわけではなく、無反応ということだったので、調べても欲しい解決策をすぐに見つけられなかったことでした。調べるキーワードが無い・・・。

目次

答え

仕様で、予約されているメソッド名は使えない ということを知りました。知らなかったorz。ちなみに Google Chrome で試していました。

サンプルコード

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="utf-8">
       <title>コマンドラインテスト</title>
       <script type="text/javascript" src="scripts.js"></script>
   </head>
    <body>
        <input type="button" value="test" onclick="click()">
        <input type="button" value="test" onclick="onclick()">
        <input type="button" value="test" onclick="myclick()">
    </body>
</html>

scripts.js

function click() {
    alert("hello");
}

function onclick() {
    alert("hello");
}

function myclick() {
    alert("hello");
}

実行結果

１つ目のボタンクリック（click()）

無反応、悲しい・・・。

２つ目のボタンクリック（onclick()）

こちらはエラーメッセージが出てくれました。エラーという反応をしてくれて嬉しかったです。でも範囲エラーと言われて、あ～予約語使っちゃったからねゴメンね。という結び付けは、初見には不可能な気が・・・。

Uncaught RangeError: Maximum call stack size exceeded
    at HTMLInputElement.onclick (index.html:10)
    at HTMLInputElement.onclick (index.html:10)
    at HTMLInputElement.onclick (index.html:10)
    at HTMLInputElement.onclick (index.html:10)
    at HTMLInputElement.onclick (index.html:10)
    at HTMLInputElement.onclick (index.html:10)
    at HTMLInputElement.onclick (index.html:10)
    at HTMLInputElement.onclick (index.html:10)
    at HTMLInputElement.onclick (index.html:10)
    at HTMLInputElement.onclick (index.html:10)

３つ目のボタンクリック（myclick()）

hello というアラートが無事に出てくれました！嬉しい！