JavaScript - Изменение src изображения с помощью DDL

Question

некоторое время оглядывалось вокруг и не могло найти ничего, что похоже на то, что мне нужно. Я хочу изменить изображение футболки на один цвет, в зависимости от того, какой цвет выбран в выпадающем меню.

Вот DDL:

<select name="Colours" onchange = "changeImage()"> 
        <option value="White">White</option> 
        <option value="Red">Red</option> 
        <option value="Blue">Blue</option> 
        <option value="Yellow">Yellow</option> 
        <option value="Purple">Purple</option> 
      </select> 

Вот функция JS Я написал (переключатель заявление повторяется для каждого из вариантов):

  <script type="text/javascript"> 
       function changeImage(){ 
         var x = document.getElementById("Colours").value; 
         switch(x){ 
         case "White": 
            document.Mainimg.src = images/white.jpg; 
            location.reload(); 
            break; 
         case "Red": 
           document.Mainimg.src = images/red.jpg; 
           location.reload(); 
           break; 

И, наконец, если это необходимо, Код для изображения:

   <div id="main_img"> 
        <img id="Mainimg" name="Mainpic" src=images/white.jpg> 
       </div> 

Это не работает, ничего не происходит, когда я выбираю новую опцию в li ул. У меня есть полное неправильное представление о том, как это сделать, или это просто простая настройка?

Спасибо за любую помощь.

Answer 1

Удалить location.reload(): при перезагрузке страницы вы теряете свои изменения. То, что вы меняете src изображения, достаточно, чтобы загрузить его.

Использование getElementById принести изображение и поместить URL в кавычках:

document.getElementById('Mainimg').src = "images/white.jpg"; 

Недостающие цитаты могли быть обнаружены только с помощью консоли, которая показывает ошибку компиляции. Используйте the console.

Answer 2

Возможно, что вы хотите сделать это: http://jsfiddle.net/jWbUv/

HTML:

<select name="Colours" onchange = "changeImage(this)"> 
        <option value="">please select</option> 
        <option value="White">White</option> 
        <option value="Red">Red</option> 
        <option value="Blue">Blue</option> 
        <option value="Yellow">Yellow</option> 
        <option value="Purple">Purple</option> 
      </select> 
<div id="main_img"> 
</div> 

JS:

function changeImage(src) { 
    var mainImg = document.getElementById('main_img'); 
    mainImg.style.setProperty('background-image', 'url(\''+ src.value +'.png\')'); 
} 

CSS:

#main_img { 
     width: 100px; 
     height: 100px; 
     background-size: contain; 
     background-repeat: no-repeat; 
    }