オブジェクトの指定をIDで統一

JavaScript DHTML

　FireFox対応版、解決編。

  • <IMG NAME="char">と<DIV ID="maintext">で渡し方が違うので統一したい。

　の解決編。
　NAME属性の方で統一しようとしたんだけどうまくいかなかったんで、IDの方で統一しました。
　<IMG>タグの方も、NAME属性ではなくID属性で名前を指定します。
　それを、getData()メソッドに文字列として渡します。


index.html

<IMG ID="character" SRC="Ki.jpg" BORDER="0"><BR>
<DIV ID="maintext">　</DIV><BR>
<input type="button" value="「喜」へ切り替え" 
    onClick="getData( 'dataKi.xml', 'character', 'maintext' ); return false;">
</form> <input type="button" value="「怒」へ切り替え" 
    onClick="getData( 'dataDo.xml', 'character', 'maintext' ); return false;">


　受け取ったメソッドではgetElementById()メソッドで名前から
オブジェクトを取得します。


test.js

                // <image>の中身を取得します。
                var imageUrl 
                    = page.getElementsByTagName( "image" )[0].childNodes[0].nodeValue;
                // イメージ置き換え先の取得。
                var imageObj = document.getElementById( imageObjId );
                // イメージを置き換えます。
                imageObj.src = imageUrl;

                // <text>の中身を取得します。
                var text 
                    = page.getElementsByTagName( "text" )[0].childNodes[0].nodeValue;
                // テキスト置き換え先の取得。
                var textObj = document.getElementById( textObjId );
                // テキストを置き換えます。
                textObj.innerHTML = text;


　これに対して値をセットします。


　個人的には、逆にNAMEの方で統一したかったんだけど、<DIV>タグにNAME属性付けてそれで渡してもエラーになっちゃったんで……このあたりの完全な構文仕様書が欲しい……。