勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

IEでjavascript関数の初期値

2016/07/11

あるJavaScriptの関数でchromeやfirefoxは正常に動いたけどIE11のみ動かないという現象が発生した。F12キーで開発者ツールからコンソールを確認しましたところ「')'がありません」との表示がされ、さらにその関数を動かすと「'関数名'は定義されていません。」と表示された。

見出し

1 症状
2 原因
3 その他

症状

aタグリンクからonclickでtest_func関数を動かしたとする。ソースとしては以下のようなもの。

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
</head>
<body>
<a href="javascript:void(0);" onclick="return test_func(1)">test</a>

<script>
function test_func( score, flg = true ){
	if( flg ){
		alert(1);
	}
}
</script>

</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<html lang="ja">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>title</title>

</head>

<body>

<a href="javascript:void(0);" onclick="return test_func(1)">test</a>

<script>

function test_func( score, flg = true ){

if( flg ){

alert(1);

}

}

</script>

</body>

</html>

これをchromeやfirefoxではaタグを叩くと「1」のアラートが表示されるが、IE11では何も動作しなかった。コンソールを追うとページを開いた時点で「')'がありません」と表示、aタグを叩くと「test_funcは定義されていません。」と表示された。

原因

明確な原因は正直分からなかったんだけど、関数の初期値(デフォルト引数)がひっかかっているっぽい。初期値を設定せず、またonclickで関数を叩く際に引数をきちんと渡すと正常に動いた。以下のような形。

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
</head>
<body>
<a href="javascript:void(0);" onclick="return test_func(1, true)">test</a>

<script>
function test_func( score, flg ){
	if( flg ){
		alert(1);
	}
}
</script>

</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<html lang="ja">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>title</title>

</head>

<body>

<a href="javascript:void(0);" onclick="return test_func(1, true)">test</a>

<script>

function test_func( score, flg ){

if( flg ){

alert(1);

}

}

</script>

</body>

</html>

その他

JavaScriptでデフォルト引数を使うのは遠慮しておいた方が良さそう。使うとしても関数の中で「if(typeof param === 'undefined') param = デフォルト値;」とチェックして代入するような形で使うようにする。

関連記事

: javascriptとPHPで正規表現を使う場合

とりあえず使いそうなのは検索と置換。 ■javascript var str = ...

: javascriptでメモリ開放

今まで考えたこと無かったけどjavascriptを使う際はメモリ消費に気をつけ ...

: サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...

: 他サイトのRSS情報を画像付きで表示させる

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...

: JavaScriptでURLのクエリを取得する

やりたかった事はJavaScriptでGETのクエリを取得。 ■ソース var ...

: JavaScriptで小数の計算(decimal.js)

JavaScriptで小数の計算をすると値がずれることがあった。調べてみるとJa ...

: Flashを用いずJavaScriptでコピー&カット機能を実装する

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...

: GoogleMapAPIでヒートマップを表示する方法

GoogleMapAPIで花粉状況や雨量を可視化しやすいようなヒートマップ的なも ...

: 日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。・日付入力のテキストフォームにカレンダープラ ...

: JavaScriptで三項演算子の中に三項演算子

既存のソースを作り変えている際によく分からないソースがあった。だいぶ書き換えて ...

PREV: 複数の方法で301リダイレクト
NEXT: VPSに無料SSLのLet's Encryptを導入

新着記事

: ACFでセレクトメニューを動的に生成

WordPressでカスタムフィールド設定用のプラグインAdvanced Cus ...

: 八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

: サーバ内でバージョン確認方法のまとめ

OSやApacheのバージョンを確認する際にいつもググっていたので、調べやすいよ ...

: CentOS6.10に無料SSL(Let's Encrypt)を導入

以前にもVPSにLet's Encryptを導入するという記事を書いたが、テスト ...

: VPSにMovableTypeをインストール

VPSにMovableTypeをインストールしたかった。バージョン7系はインスト ...

カテゴリー
- Ajax
- CMS
- CSS
- Flash
- htaccess
- HTML
- JavaScript
- jQuery
- memcached
- MovableType
- MySQL
- MySQLi
- PHP
- redis
- Ruby
- SEO
- SQLite
- VPS
- WordPress
- その他
- アプリ
- エラー管理
- サーバー
- ドメイン
- ブラウザ
- モバイル
- 正規表現
- 画像