過去ログ表示


過去ログ 380 を表示

トピック内全 3 記事中の 1 〜 3 番目を表示
[ 最新記事及び返信フォームをトピックトップへ ]
このトピックの全ページ / [0]

formと不正な関数名の関係について
(#56522) このトピック中1番目の投稿
(環境: Win 7/Other)
Bugzilla-jp に投稿するのに認識違いだったら恥ずかしいので、確認させていただきたく、
下記の症状に心当たりのある方いらっしゃいますか?

Firefox 18.0.2 で実行すると NGボタン押下した時にTypeErrorとなって実行されません。

form内の input 要素で list という名前がまずいみたいな雰囲気なのですが
こういうものなのでしょうか?
何が原因で null となってしまうのでしょうか?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script>
    function list() { alert('A'); return false; }
    </script>
  </head>
  <body>
    <button onclick="alert( list ); return list();">OK</button>
    <form>
    <!-- firefox 18.0.2では TypeError: list is not a function -->
      <input type="button" onclick="alert( list ); return list();" value="NG" >
    </form>
  </body>
</html>

Re: formと不正な関数名の関係について
(#56526) このトピック中2番目の投稿
(環境: WinXP SP3/Other)

> form内の input 要素で list という名前がまずいみたいな雰囲気なのですが

そこまで行っているのなら、lisuとかlist2とかlistxとかでも確認してみればいいのにぃ...

> 何が原因で null となってしまうのでしょうか?

Google ChromeでもFirefox 17.0でも起こったので、ちょっと調べてみました。

<input id="OK" type="button" value="OK" ...">
<form id="From">
<input id="NG" type="button" value="NG" ...">
</form>
とでもしてidをつけておき、
適当に<div id="debug"></div>を置き、
以下のボタンを置き、
<button onclick="chk('Form');">chk-Form</button>
<button onclick="chk('OK');">chk-OK</button>
<button onclick="chk('NG');">chk-NG</button>
<head>に以下の<script>を入れ、
function chk(name)
{
var obj=document.getElementById(name);
var msg="";
msg+="<"+"hr>";
msg+=(typeof obj.list)+"<"+"br>"+String(obj.list);
msg+="<"+"hr>";
var xx=new Array();
for(var nm in obj){ xx[xx.length]=nm; }
xx.sort();
for(var nn=0;nn<xx.length;nn++){ msg+="<"+"br>"+xx[nn]; }
var debug=document.getElementById("debug");
debug.innerHTML=msg;
}
</script>
それぞれのボタンをクリックしてみると、<form>の中の<input type="bottun" id="NG" ...>にだけ、listというプロパティがあって、typeofはobject、String(obj.list)はnullになることがわかります(nullのtypeofはobject)。
<form>、<form>の外の<input type="bottun" id="OK" ...>の場合には、listというプロパティはなく、obj.listは、typeofもString(obj.list)もundefinedになることもわかります。

HTML 4.2では<input>のlistプロパティは無かったような気が...
Web Apps絡みで新設されて、HTML 5にはもう定義されている?
> http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-list-attribute
> http://www.whatwg.org/specs/web-apps/current-work/
> HTML Living Standard ― Last Updated 17 February 2013
JavaScriptの予約語とは違って、HTML要素のプロパティとかは簡単に増やしやすいですけど、突然増やされたり変えられたりすると、追いかけるのに苦労しますね。

HTML 5でJavaScriptの実行のコンテキストが<input>エレメントの直下に変わった、というようなこともあるかもしれませんけど、イベントハンドラーはイベントが発生した要素をthisとしてアクセスできるようになっているのが普通なので、何も修飾が無いlistでアクセスすれば当然の現象になるでしょう。
function定義であることですし、明示的にwindow.listとかself.listとかwindow.self.listとするとか、何かのオブジェクトのメソッドとして定義して明示的にMyOwnObject.list()を定義するとかすればいいと思います。

なお、NGだけ(formの中だけ)にあるのは以下のプロパティで、OKだけ(formの外だけ)というのは無しでした。
けちらないで、どこにあろうと、意味があろうがなかろうが、全部のプロパティを常にセットすれば混乱も少ないだろうに..

accept
align
alt
autocomplete
checked
controllers
defaultChecked
defaultValue
files
height
indeterminate
list
max
maxLength
min
mozGetFileNameArray
mozIsTextField
mozSetFileNameArray
multiple
pattern
placeholder
readOnly
required
select
selectionDirection
selectionEnd
selectionStart
setSelectionRange
size
src
step
stepDown
stepUp
textLength
useMap
valueAsNumber
width

Re: formと不正な関数名の関係について
(#56530) このトピック中3番目の投稿
(環境: Win 7/Other)

詳細な説明ありがとうございました。
HTML5まわりですか。Web系は専門外なのでノーチェックでした。
この方面で類似の問題がないかも調べてみます。

>そこまで行っているのなら、lisuとかlist2とかlistxとかでも確認してみればいいのにぃ...

一応、Listにすると、うごくところまでは確認していたのでした。
ただ、for inでformのメンバを列挙してもlistというメンバが見つからなかったので
原因が全然わかんなくなってしまっていました。
見落としていたか、やり方が悪かったみたいです。

>明示的にwindow.listとかself.listとかwindow.self.listとするとか、何かのオブジェクトのメソッドとして定義して明示的にMyOwnObject.list()を定義するとかすればいいと思います。

window.list() と することでアクセスできました。
グローバル系のアクセスには、window.selfとかつけたほうが無難そうですね。

HTMLの作りが悪かったということで理解出来ました。
ありがとうございます。とても助かりました。


このトピックの全ページ / [0]

返信不可


- Child Tree -