0

このフィドルが機能しない理由:

クラス名に基づいてスパンの内容を変更するjsFiddle

<label>Change:</label>
<select name="list" id="list">
<option value="Test_a" selected>Test_a</option>
<option value="Test_b">Test_b</option>
<option value="Test_c">Test_c</option>
<option value="Test_d">Test_d</option>
</select>
<br/>1: <span name="result" class="result">Test_a</span>
<br/>2: <span name="result" class="result">Test_a</span>
<br/>3: <span name="result" class="result">Test_a</span>

<script>
var list1 = document.getElementById('list');
var tag1 = document.getElementsByClassName('result');

for (var i = 0; i < elems.length; i++) {
list1.onchange = function () {
    tag1.innerHTML = this.value;
};
};
</script>

spans3 つすべて( class="result") を変更して、ドロップダウン メニューの選択肢と同じ値を表示できるようにしたいと考えています。

を使用して結果がgetElementById1 つしかない場合は正常に動作します。spanid="result"

4

2 に答える 2

1

これがあなたが求めているものだと思います。リストの変更時に、すべてのスパンをリストの値で更新します。

var list = document.getElementById('list');
var spans = document.getElementsByClassName('result');

list.onchange = function () {
    for (var i = 0; i < spans.length; i++) {
        spans[i].innerHTML = this.value;
    }
}
于 2013-04-20T12:47:21.403 に答える
0

このフィドルが機能しないのはなぜですか

tag1あなたのコードでは単一の DOM 要素への参照ではないため、それにはプロパティ.innerHTMLがありますが、メソッドは一致する要素のHTMLCollectionを返すため、それらを個別に操作する場合はループする必要があります。

list1.onchange = function () {
  for (var i=0, l=tag1.length; i<l; i++) {
    tag1[i].innerHTML = this.value;
  };
};
于 2013-04-20T12:50:26.063 に答える