Internet ExplorerでJavaScript関数の初期値について
2024/02/25
あるJavaScriptの関数でchromeやfirefoxは正常に動いたけどIE11のみ動かないという現象が発生した。F12キーで開発者ツールからコンソールを確認しましたところ「')'がありません」との表示がされ、さらにその関数を動かすと「'関数名'は定義されていません。」と表示された。
症状
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>
これを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>
その他
JavaScriptでデフォルト引数を使うのは遠慮しておいた方が良さそう。使うとしても関数の中で「if(typeof param === 'undefined') param = デフォルト値;」とチェックして代入するような形で使うようにする。
関連記事
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
jQueryでformの各種パーツ(テキストボックス等)の操作まとめ
jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...
table内のiframeのheightを最大高さにする
tableのtdの中にリンクがあり、クリックすると td内でiframeが開く。 ...
Lightbox.jsでCSP(コンテンツセキュリティポリシー)エラーが発生した際の対応方法
CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightbo ...
jQueryのdatetimepickerでスクロール入力を無効化させる方法
日時ピッカーのjQuery datetimepickerにて、ピッカーを指定して ...