人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascript の getElementById で悩んでいます。
それぞれ違ったID箇所(かなりの量)を、リストボックスで選択するたびに、
「何たら」を違うものに表示させています。

<span id="1">何たら</span>
<span id="2">何たら</span>
<span id="3">何たら</span>
かなりの量で続く↓

if(document.hoge.list.value=1){
document.getElementById('1').innerHTML = 'こうたら';
}else if(document.hoge.list.value=2){
document.getElementById('2').innerHTML = 'こうたら';
}else if ....

リストボックスを選択(例えばID1)したときに変更するところまでは出来ている(ID1は”こうたら”になった)のですが、
再び違うID箇所が選択(ID2)されたときには、以前の変更箇所は初期に戻したい(ID2は”こうたら”に変更、ID1は”何たら”に戻したい)のです。

document.getElementById('1').innerHTML = '何たら';

ID2に上記を追加すればいいことはわかりますが、
リストの何を選ばれるか分かりませんので、現状ではIDの数だけ書かなければなりません。

やりたいことは上書きされるのではなく、選択するたびに新規の動作がほしい。

説明が悪いですが、よろしくお願いしますm(_)m

●質問者: tontonpokopoko
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:hoge JavaScript ボックス リスト
○ 状態 :終了
└ 回答数 : 7/7件

▽最新の回答へ

1 ● HowAreYou
●10ポイント

一度に変更されているのが一か所だけなら

  1. 前に変更されたところがあれば元に戻す
  2. 今回変更される箇所の ID と innerHTML を保存
  3. 内容を変更

みたいな処理にしたらどうですか

◎質問者からの返答

回答をありがとうございます。

参考になりました。


2 ● deflation
●50ポイント

idに配列を使ってはいかがでしょうか。

下に例示します。

<span id="span[1]">どーたら</span>
<span id="span[2]">こーたら</span>
<span id="span[3]">あーたら</span>
....
id = document.hoge.list.value;
document.getElementById('span[' + i + ']').innerHTML = 'ふんがー';
◎質問者からの返答

回答をありがとうございます。

今回は違う方法をとりまししたが、IDの中に配列を入れる方法は使わないので参考になりました。


3 ● a-kuma3
●80ポイント

こういうこと?

<html>
<style>
</style>
<script>
var values = {
1: "あ",
2: "い",
3: "う",
"END": "end"
}

function xxx(sel) {

var id = sel.options[sel.selectedIndex].value
var e = document.getElementById(id)
if (sel.old) {
sel.old.e.innerHTML = sel.old.value
} else {
sel.old = {}
}
sel.old.e = e
sel.old.value = e.innerHTML
e.innerHTML = values[id]
}
</script>

<body>
<select id="list" onchange="xxx(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>

<span id="1">A</span><br>
<span id="2">B</span><br>
<span id="3">C</span><br>

</body>
</html>

◎質問者からの返答

回答をありがとうございます。

1番シンプルで、勉強になりました。


4 ● やちまう
●100ポイント

出端をくじくようで申し訳ありませんが、IDの値を数字から開始してはいけません。

アルファベットから始まらなければHTML文法違反になります。


なので、次のHTMLを前提として簡単なソースコードにて回答いたします。

<span id="ID1">なんたら1</span><br />
<span id="ID2">なんたら2</span><br />
<span id="ID3">なんたら3</span><br />
<span id="ID4">なんたら4</span><br />
<span id="ID5">なんたら5</span><br />
<span id="ID6">なんたら6</span><br />
<span id="ID7">なんたら7</span><br />
<span id="ID8">なんたら8</span><br />
<span id="ID9">なんたら9</span><br />

<form action="#">
<select size="9" id="listbox" onchange="changeValue();">
 <option value="1">かんたら1</option>
 <option value="2">かんたら2</option>
 <option value="3">かんたら3</option>
 <option value="4">かんたら4</option>
 <option value="5">かんたら5</option>
 <option value="6">かんたら6</option>
 <option value="7">かんたら7</option>
 <option value="8">かんたら8</option>
 <option value="9">かんたら9</option>
</select>
<br />
<input type="button" value="リセット" onclick="reset(); changeValue();" />
</form>

要件としては「選択したもののみ、それに対応するID要素を書き換える。ただし、それ以外はデフォルト文字列にしたい。」

…というものですね。配列を用いれば至極簡単に実装できます。

要素数が増えても長くなるのは文字列を指定する初期化部分だけです。


<script type="text/javascript">
<!--

/*
 * 変数初期化
 */
var idCount = 9; // 該当ID要素の個数を指定する
var defaltValues = new Array(); // 書き換え前の文字列を格納する配列
var newValues = new Array( // 書き換え後の文字列を配列に格納しておく
 "", // ここは空値にしておく※
 "かんたら1", // listboxのオプション1つ目が選択された時の変更文字列。
 "かんたら2", // …以下同様。
 "かんたら3",
 "かんたら4",
 "かんたら5",
 "かんたら6",
 "かんたら7",
 "かんたら8",
 "かんたら9"
);

// 書き換え前の文字列(デフォルト文字列)を取得して配列に格納しておく
for (var i = 1; i <= idCount; i++) {
 defaltValues[i] = document.getElementById("ID" + i).innerHTML;
 // 配列の添字は「0」からだが、紐付けしやすいように「添字1=ID1」とする。
 // つまり、配列先頭のdefaltValues[0]は空値とする。※
}

/*
 * 書き換え実行
 */
function changeValue() {
 selectedItem = document.getElementById("listbox").selectedIndex + 1;
 for (var i = 1; i <= idCount; i++) {
 // listboxで選択されたものに対応するIDの文字列を書き換える
 if (i == selectedItem) {
 document.getElementById("ID" + i).innerHTML = newValues[i];
 }
 // それ以外はデフォルト文字列に戻す
 else {
 document.getElementById("ID" + i).innerHTML = defaltValues[i];
 }
 }
}

//-->
</script>
◎質問者からの返答

回答をありがとうございます。

わかりやすい説明で時間をかけていただき恐縮です。

今回はinputのhiddenに、IDなどを保存する方法を取らせていただきましたが、

機会があればまたよろしくお願いいたします。


5 ● tama213
●10ポイント

この場合なら、2つリストボックスを作って

表示、非表示を切り替えて

入れ替えればよいのでは?

◎質問者からの返答

回答をありがとうございます。


1-5件表示/7件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ