innerHTMLでHTML要素の中身を変えたい

質問

URLでidを指定して「色の違い」を表記しています。
今の「色の違い」に追加して「特徴の違い」も表記したいと考えています。

「現状」
●サイトのURL
http://www.hogehoge.com/?id=11
http://www.hogehoge.com/?id=21
http://www.hogehoge.com/?id=31

●JavaScript
<script type="text/javascript">
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];
}
function area(id){
if(11 == arg.id){document.getElementById(id).innerHTML = "赤い";}
else if(21 == arg.id){document.getElementById(id).innerHTML = "青い";}
else if(31 == arg.id){document.getElementById(id).innerHTML = "黒い";}
else {document.getElementById(id).innerHTML = "白い";}
}
window.onload = function (){
var i;
for (i=1;i<=3;i++) { /* type1～type3まで設定 */
area("type"+i);
}
}
</script>

●HTML
<div><span id="type1"></span>ポーチ</div>
<div><span id="type2"></span>財布</div>
<div><span id="type3"></span>カバン</div>

●サイト上の表示例（id=11の場合）
赤いポーチ
赤い財布
赤いカバン

※変更したい点
「おしゃれな」
「かっこいい」
「新しい」
「古い」
という４つの特徴の違いを追加したい

※変更後のサイト上での表示例
おしゃれな赤いポーチ
おしゃれな赤い財布
おしゃれな赤いカバン

色４つ×特徴４つの計１６パターンを
URLのidによって表示したいと考えています。
よろしくお願いいたします。

回答No.1

Proof4 · ベストアンサー

期待された動作が把握できていない（特徴の違いを表わすパラメータは何か？）ため、idの一の位が特徴、十の位が色を表わすものとしてスクリプトを書けばこのような感じになります。
色や特徴を表わす文字列はconst strsetsとしてまとめて定義しています。

<script type="text/javascript">
　const strsets = [
　　["白い", "赤い", "青い", "黒い"],
　　["おしゃれな", "かっこいい", "新しい", "古い"]
　];
　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];
　}
　function area(id){
　　area_str = "";
　　num_places = arg.id.split(""); /* idの数字を位毎に分ける */
　　for(var i=1; i>=0; i--){
　　　tmp = strsets[i][parseInt(num_places[i])]
　　　area_str += tmp ? tmp : strsets[i][0]; /* strsetsに該当する要素がないときは0番目代入 */
　　}
　　document.getElementById(id).innerHTML = area_str;
　}
　window.onload = function (){
　　var i;
　　for (i=1;i<=3;i++) { /* type1～type3まで設定 */
　　　area("type"+i);
　　}
　}
</script>
※OKWAVEの仕様上、インデントを全角スペースを用いて表現しています。コピペの際はご注意ください。