2

ドロップダウンリストからバッテリー9を選択できるようにしたいと思います。
バッテリー9の画像をimgタグに表示したい。
私は何か間違ったことをしていますか？

HEAD
function checkBatteryLife(){
if(document.getElementById('batterylifes').value == 'batterylife9'){
    document.getElementsByTagName('batteryID').src = 'battery9.png';
}
BODY
<img alt="" src="" name="batteryID" onclick="checkBatteryLife()">
</br>
<select id="batterylifes" onchange="checkBatteryLife()">
<option name="batteryIMG" value="batterylife9">Battery 9</option>
</select>
4

3 に答える 3

5

getElementsByTagNameメソッドは、IMGまたはなどの名前でタグのコレクションを返しますSELECT。タグの属性を渡してnameも、結果は得られません。

おそらくgetElementByIdidを使用して、要素のを渡す必要があります。

function checkBatteryLife() {
   if(document.getElementById('batterylifes').value == 'batterylife9')
   {
      document.getElementsById('batteryID').src = 'battery9.png';
   }
}

..

<img alt="" src="" id="batteryID" onclick="checkBatteryLife()" />
<br />
<select id="batterylifes" onchange="checkBatteryLife()">
   <option name="batteryIMG" value="batterylife9">Battery 9</option>
</select>

getElementsByNameを使用して、指定されたプロパティを持つDOM要素のコレクションを返し、nameそれを反復処理して正しいものを見つけることもできます。

于 2012-07-12T17:57:07.760 に答える
3

の代わりに.getElementsByName（）関数が必要です.getElementByTagName()：

document.getElementsByName('batteryID')[0].src = 'battery9.png';

関数は単一の要素ではなくリストを返すため.getElementsByName()、リストの要素にアクセスするには[]角かっこを使用する必要があります。具体的には、と最初に一致する要素が必要であるため、を使用する必要がありname="batteryID"ます[0]。

于 2012-07-12T17:56:06.513 に答える
1

optionまず、の値を読み取るだけで選択した値を取得することは、クロスブラウザ互換ではありませんselect。代わりに、最初に選択されたものを検出してから、optionITS値を読み取ります。

var sel = document.getElementById('batterylifes');
if (sel.options[sel.options.selectedIndex].value == 'batterylife9') {
    //your code here...
}

第二に、多くの人が指摘しているように、あなたは誤ってgetElementsByTagName単一の要素をその名前で参照するために使用しています。getElementsByName()クロスブラウザ互換ではありませんが、必要です。別のオプション：

  • jQueryまたはその他のライブラリを使用する
  • 古いブラウザを気にしない場合は、新しいdocument.querySelector()メソッドを使用して、CSS構文を介して要素を選択します
  • 画像にIDを付けて使用するgetElementById()
于 2012-07-12T18:03:29.887 に答える