2

ドロップダウンリストでオプションを選択すると、画像を変更しようとしています:

function volvoCar()
{
var img = document.getElementById("image");
img.src="volvo.png";
return false;
}

など、各車ごとに。

<img id="image" src="Null_Image.png"/>
<select id="CarList">
<option onclick="nullCar()">No Car</option>
<option onclick="volvoCar()">Volvo</option>
<option onclick="audiCar()">Audi</option></select>

解決策を提供してくれるものをオンラインで見つけることができないようです。表現がぎこちないからなのか、やろうとしていることは JavaScript では不可能なのか、わかりません。

4

2 に答える 2

2

onClickオプションのイベントを設定する代わりにonChange、選択のイベントを設定します。

HTML

<img id="image" src="Null_Image.png" />
<select id="CarList">
    <option value="Null_Image.png">No Car</option>
    <option value="volvo.png">Volvo</option>
    <option value="audi.png">Audi</option>
</select>

JavaScript

function setCar() {
    var img = document.getElementById("image");
    img.src = this.value;
    return false;
}
document.getElementById("CarList").onchange = setCar;

これが実際のデモです

于 2013-05-21T03:24:36.220 に答える
1

さて、あなたはいくつか間違ったことをしています。

  1. 関数が呼び出され、呼び出さvolvoCarれた関数を使用しようとしていますVolvoCar- JavaScript では大文字と小文字が区別されます。

  2. これは、イベント リスナーを割り当てる最良の方法ではありません。これを HTML に追加しているため、「乱雑」と見なされます (控えめな JavaScriptを参照)。また、関数の結果ではなく、をアタッチしたいと考えてfunctionいます（関数を呼び出して実行しています）。関数は JavaScript の第一級オブジェクトです。

  3. onclickこの場合に使用するイベント ハンドラは正しくありません。要素のonchangeハンドラを使用したい。<select>

そう：

HTML:

<img id="image" src="Null_Image.png"/>
<select id="CarList">
    <option value="Null">No Car</option>
    <option value="Volvo">Volvo</option>
    <option value="Audi">Audi</option>
</select>

JS:

var changeCarImage = function () { 
    document.getElementById('image').src = this.options[this.selectedIndex].value + "_Image.png"
}

var carList = document.getElementById('CarList');
carList.addEventListener('change', changeCarImage, false); // Note this has some issues in old browsers (IE).

これはここで動作しているのを見ることができます!

于 2013-05-21T03:31:29.970 に答える