同じメソッドを複数回、呼び出しは可能でしょうか

質問

<script>
var arg = new Object, p = location.search.substring(1).split('&');
for(var i=0; p[i]; i++){
var kv = p[i].split('=');
arg[kv[0]] = kv[1];
}
window.onload = function (){
if(01 == arg.id){document.getElementById("type").innerHTML = "あなたはＡ型";}
else if(02 == arg.id){document.getElementById("type").innerHTML = "あなたはＢ型";}
else if(03 == arg.id){document.getElementById("type").innerHTML = "あなたはＯ型";}
else if(04 == arg.id){document.getElementById("type").innerHTML = "あなたはＡＢ型";}
else {document.getElementById("type").innerHTML = "わかりません";}
}
</script>

サイトへの表示は
<span id="type"></span>
と記述することで、問題なく表示ることができています。

しかし、これを複数個所に記述すると
最初の箇所しか表示しません。

同じページの複数の箇所（希望は４か所）に表示させるためには、
どのようにすればよいのでしょうか。

回答No.2

AsarKingChang · ベストアンサー

>しかし、これを複数個所に記述すると
「これ」の主語がわかりませんが。
ＨＴＭＬだとしたら、idはもともとユニーク（２つ同じものがないもの）を
前提なので、複数回書くこと自体ＮＧです。

なので、type1,type2,type3,と違うＩＤを割り付けるようにすればＯＫです。
if(01 == arg.id){document.getElementById("type").innerHTML = "あなたはＡ型";}
"type"という部分は、ここでつかっているわけですから、ここを変数にして、
var id="type1";
if(01 == arg.id){document.getElementById(id).innerHTML = "あなたはＡ型";}
と、名前を変数からにすれば、何セットでも、量産できますよ。

それと、比較に"04"と書いてますが、数字は4であり、
"04"ではないので、4で比較したほうがいいですよ。
010は、数字の10ではなく、8になるので、バカなバグのもとになります。
（先頭に0を書くと、10進数ではなく、8進数つまり、７－＞８で桁上がりします）
（010-1＝07 という事）

という事で、最終回答
function waaa(id){
switch(arg.id) { /* この変数も本来はパラメタに入れるべきだが */
case 1:document.getElementById(id).innerHTML = "あなたはＡ型";break;
case 2:document.getElementById(id).innerHTML = "あなたはＢ型";break;
case 3:document.getElementById(id).innerHTML = "あなたはＯ型";break;
case 4:document.getElementById(id).innerHTML = "あなたはＡＢ型";break;
default:document.getElementById(id).innerHTML = "わかりません";break;
}
}
window.onload = function (){
var i;
for (i=1;i<=4;i++) { /* 仮で、type1～type4まであることを仮定 */
waaa("type"+i);
}
}
でどうでしょうか？
if を switchに変えているのは、すべてが同一の変数の為です。
if でネストし続ける場合は、他の変数で比較をしたい場合に問題が起こりにくく、
同じ変数がいくつか？の場合は、switchにしたほうが、問題が起こりにくいでしょう。

回答No.4

4017B

とりあえず id="" を class="" に変更して以下みたいにすれば通ると思うけど…

<span class="my-blood-type"></span>

window.onload = function (){
var my_str = "Your blood-type is... ", my_arg = arg.id, my_arr = document.getElementsByClassName('my-blood-type'), cnt = my_arr.length;

if ( '01' == my_arg ) {
my_str = my_str +'A';
}
else if ( '02' == my_arg ) {
my_str = my_str +'B';
}
else if ( '03' == my_arg ) {
my_str = my_str +'O';
}
else if ( '04' == my_arg ) {
my_str = my_str +'AB';
}
else {
my_str = my_str +'Unknown.';
}

for (var i=0; i<cnt; i++) {
my_arr[i].innerHTML = my_str;
}
}

例文の最初の方は恐らくアクセス時の引数で処理を振り分けてるんだと思うけど、まあ弄らずにそのままでメインのHTML表示部分のみ変更してみました。後、URLに引数として渡した場合、その値はそのままだと通常は文字列型なので 01==id みたいな数値演算比較すると期待した挙動にならないです。

P.S.
Javascript関数の getElementById() てそのまま英語で書いてある通りで、「IDによって、エレメントを、ゲットする」て意味なので。つまり "Elements(複数)" では無くあくまでも "Element(単数)" しかゲットしない。

従って同一ページ内に同じ名前の要素(同一ID名の要素)が複数存在した場合、ページ内で上から順に探して行って最初にヒットした時点で動作終了する様になってます。

これは何も間違って無くて正しい動作。W3C準拠のHTML5でも同一ページ内にID要素は1つしか存在しない事を推奨してるので。HTML構文的に間違いとは言えないけど、同じID名の要素が複数存在する事を基本的に想定しない。

同一ページ内に同じ名前の要素を複数個存在させたい場合、CLASS名を割り振る事が推奨されてるし、JavascriptもそういうHTML構文を想定して作られている。なので関数名も getElementsByClassName() という風に複数形になってる。

回答No.3

AsarKingChang

var a=["わかりません","あなたはＡ型","あなたはＢ型","あなたはＯ型","あなたはＡＢ型"];
document.getElementById(id).innerHTML = (arg.id>=1 && arg.id<=4)? a[arg.id]:a[0];
先ほどswitchで書いた部分ですが、と、まとめてもＯＫです。
たったの2行にまとまりますけどね。

(なんとかかんとか)? なんとかを満たすならここが展開:満たさないならここが展開;
なので、１～４なら、a配列の１～４番目に書き変わり、
満たしていない場合はa[0]つまり"わかりません"が代入されるという感じ。
さらにコードを短くしたいなら、「あなたは？型」の？以外は変化していないので、
"あなたは"+a[arg.id]+"型"　と1回だけ書いて配列から文字を取れば全体では
さらに減りますが、たいした効果はないでしょうけど。

回答No.1

notnot

＞しかし、これを複数個所に記述すると

「これ」とはどの部分？
<script>～</script>のことなら、window.onload に代入するので1つしか動きません。
<span id="type"></span>のことなら、idはページで1つだけです。