質問: ### 前提・実現したいこと ↑上記サンプルなんですが、input要素のイベントハンドラからはlist関数を参照できません。test関数にはアクセスができます。何故なんでしょうか。 ### 発生している問題・エラーメッセージ `TypeError: list is not a function` ### 該当のソースコード ``` list test list test ``` ``` function list(){alert('list');} function test(){alert('test');} ``` ### 試したこと 予約語関連かと思い検索してみましたが、それらしき情報にあたりませんでした。 ### 補足情報(言語/FW/ツール等のバージョンなど) OSはWin7です。Chrome、Firefox、IE11で同様の現象が起きることを確認しました。
回答: 原因は、`` がinput要素 の list属性 を参照してしまうためです。 HTML Standard / MDN ←(input要素にはlist属性が存在する) つまり解決方法は * ``が持つプロパティ名と被らないように`onclick="~"`を指定する(姑息的) (ただし後述するように`document`(場合によっては``も)が持つプロパティとも被らないにする必要があります。) * [追記] `onclick="window.list()"`のようにグローバルオブジェクトを経由する(コメントで教えて頂きました) * `addEventListener`を使ってイベントハンドラを追加する(一番オススメ) です。 ``が持つプロパティは山ほどありますから(alt, checked, list, max, min, name, readonly, size, src, type, value, width...などなど)、被らないようにするというのは意外と難しいです。 これは`addEventListener`をおすすめする理由の一つでもあります。 なぜ`` がinput要素 の list属性 を参照するのかというと、 HTMLに直接書いた`onclick`などのイベントハンドラは、下のような環境で実行されることになっているためです。 ``` with(document){ with(this.form){ // 内の要素であれば with(this){ // this とは onclick を記述した要素自身 /* * この環境でコードが実行されます。 */ } } } ``` ですので、 ``と書いたら``のvalue属性が参照されますし、 ``と書いたら``のsubmitメソッドが参照されますし、 ``と書いたら`document.write`が参照されます。 参考:Qiita HTMLのイベント属性(onclickなど)のスコープについて (参考ページでは`with(document){}`について触れられていませんが、上の例のように`document`のプロパティも確かに拾うので注意です。)