変数の取り扱い



0   名前: hiro : 2007/08/31(金) 09:46  ID:qafwdLcN sub-bK
htmlスクリプトからprototype.jsを使ってajax的なものを作っているのですがjavascriptで変数の受け渡しがどうもうまくいきません。
問題点を簡略化したスクリプトにすると、


<a onClick="java(iwantthis)">これはHTMLのコードです。</a><span id="result">ここにファンクションjavaで処理した値を表示</span>

これを次の関数で処理
function java(VALUE){
$(result).innerHTML = VALUE;
}

処理した結果は<span id="result">のところになぜか[object]と表示されてしまいます。
自分としてはhtmlで指定した引数の"iwantthis"が表示されるものと思っていたのですが、何回やってもうまくいきません。
代入する形も""を付けたり一回他の値に代入してからやったり試したのですが、どうしても[object]と表示されます。
関数の引数をそのまま文字列としてhtmlに返して表示したいときはどうすればよいのでしょうか?凄く簡単なことかと思いますが、どうかご指導ください。

1   名前: カヅサツ ◆ThCi95HEzw : 2007/08/31(金) 09:46  [URL]  ID:O5hEMlpW sub-r2
JavaとJavaScriptとは違うので、あまり塩梅の良くない関数名かとは思いますが。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title>父さんのめがね、冷蔵庫にはいってたよ</title>
<script type="text/javascript">
function java(value){
	var text = document.createTextNode(value); //'iwantthis'をテキストノードにする
	var result = document.getElementById('result'); //id属性値が"result"である要素
	result.replaceChild(text,result.firstChild); //text とresultの最初の子ノードを置き換える
}
</script>
</head>
<body>
<p><span onclick="java('iwantthis');">これはHTMLのコードです。</span>
<span id="result">ここにファンクションjavaで処理した値を表示</span></p>
</body>
</html>

2   名前: 匿名 : 2007/08/31(金) 09:46  ID:NBtjgCNt sub-Ds
<a onClick="java(\"iwantthis\")">これはHTMLのコードです。</a>

3   名前: hiro : 2007/08/31(金) 09:46  ID:qafwdLcN sub-bK
カヅサツさん早速の返信ありがとうございます。いわれたとおり引数をテキストノードに変換してからリプレイスしてみたのですが、うまくいきませんでした。先ほど僕が提示したスクリプトですが実は凄く簡略化したものになっていて、本当はspan id のresultのところにphpの変数が入っています。先ほどはこの変数は関係ないと思って簡略化したのですが問題が解決できなかったため、phpのスクリプト部も一応簡単に書かせていただきます。申し訳ありませんでした。
<?php
$php = "result";//この変数は本来動的に動くようにしていますがここでは関係ないので定数を代入します。
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title>父さんのめがね、冷蔵庫にはいってたよ</title>
<script type="text/javascript">
function java(value){
	var text = document.createTextNode(value); 
	var result = document.getElementById(value); 
	result.replaceChild(text,result.firstChild); 
}
</script>
</head>
<body>
<p><span onclick="java(<?=$php?>);">これはHTMLのコードです。</span>
<span id="<?=$php?>">ここにファンクションjavaで処理した値を表示</span></p>
</body>
</html>
先ほどと違うところは、java関数の引数にもspan idのresultだったとこにも同じphpの変数$phpを代入するため、
document.getElementById()の()の中もjava関数の引数であるvalueが入るところです。
結果にはresultと表示されてほしいわけです。

また先ほどinnerHTMLを使った例を挙げましたが、innerHTMLを使ってこの関数を動かすこともできますでしょうか?自分にとってはそっちのほうがわかりやすいのでお願いします。
関数の引数に渡した値をテキストノードに変換しなきゃいけないということはわかったのですが、それが原因で[object]
と表示されるのでしょうか?

またjavaとjavascriptを混同したような関数名を付けた件は申し訳ありません。楽をしてしまいました(^^:)
下はinnerHTMLでやろうとしていたコードです。
<?php
$php = "result";//この変数は本来動的に動くようにしていますがここでは関係ないので定数を代入します。
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title>父さんのめがね、冷蔵庫にはいってたよ</title>
<script type="text/javascript">
function java(value){
$(value).innerHTML = value;	
}
</script>
</head>
<body>
<p><span onclick="java(<?=$php?>);">これはHTMLのコードです。</span>
<span id="<?=$php?>">ここにファンクションjavaで処理した値を表示</span></p>
</body>
</html>
<span id="<?=$php?>"></span>に[object]と結果が表示されるので変数$php = result;の引数valueの受け渡しはうまく言っているはずですが、それをinnerHTMLで出力するときに"result"ではなく"[object]"という文字列になってしまいます。またfirefoxでエラーチェックをすると"result is not defined"というエラーコメントになっています。resultと値が渡っている時点で定義されていると思いますが、何に対して未定義といわれているのかが良くわかりません。
どうかお願いします。

4   名前: 匿名 : 2007/08/31(金) 09:46  ID:b1H3LbJV sub-Cz
すでに >>2 で指摘されている。
<p><span onclick="java(result);">これはHTMLのコードです。</span>
<span id="result">ここにファンクションjavaで処理した値を表示</span></p>

これが PHP の展開形。java() 関数(いい加減に名前を変えてくれ)に渡されているのは文字列ではなく、result なるオブジェクトだ。

では result なるオブジェクトはどこにあるのか。厄介なことに、IE および IE 互換のブラウザでは、id 属性を持つ DOM ノードがグローバルなオブジェクトになってしまう。つまりこの場合、id="result" を持つ span 要素ノードが java() 関数の引数になっている、というわけ。


innerHTML は決して分かりやすくない。パース済みの DOM ノードをいちいち文字列に直してまたパースして……を繰り返すのでは、何のための DOM か分からない。どうしても innerHTML を使うなら、DOM3-LS の皮でもかぶった専用の入出力関数を用意してラップした方が,保守性の良いコードになると思う。

5   名前: 匿名 : 2007/08/31(金) 09:46  ID:rCEBAxh3 sub-fd
ひとつ訂正。

> すでに >>2 で指摘されている。

ごめん、うっかり見逃してたが、>>2 はパースエラーだ。でも、言わんとすることは分かるよね。>>1 のように文字列として与えれば良い。

6   名前: カヅサツ ◆ThCi95HEzw : 2007/08/31(金) 09:46  [URL]  ID:O5hEMlpW sub-r2
> 先ほどはこの変数は関係ないと思って簡略化したのですが問題が解決できなかったため、phpのスクリプト部も一応簡単に書かせていただきます。

>>3の1つめのコードが何故上手くいかないかは、出力された HTML と >>2 を見比べてみればわかると思います。ヒントは引用符。
ここはJavaScriptの掲示板なので、phpの話をされるのであれば、総合質問板へ移動してください。

> innerHTMLを使ってこの関数を動かすこともできますでしょうか?

私はあまり独自拡張に詳しくないです。

一覧へ戻る