Вопрос по option, select, html, image, javascript – Отображение изображения при выборе опции из выпадающего списка

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, я не знаю.

посмотри этоКак ответить[1] Это прекрасно: [1]:stackoverflow.com/a/3487274/1460591 YouYou

Ваш Ответ

2   ответа
1

Ваша функция называетсяvolvoCar и вы пытаетесь использовать функцию под названиемVolvoCar - JavaScript чувствителен к регистру.

Это не лучший способ назначить прослушиватель событий. Вы добавляете его в HTML, который считается «грязным» (см.Ненавязчивый JavaScript). Кроме того, вы хотите прикрепитьfunction, а не результат функции (которую вы делаете, вызывая ее). Функции являются первоклассными объектами в JavaScript.

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).

Это видно работаетВот!

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;

Вот рабочая демка

Похожие вопросы