Как настроить отображение изображения из раскрывающегося меню?

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

Спасибо за любую предоставленную помощь.

JS

function setMovie() {
  var img = document.getElementById("movimg");
  var value = img.options[img.selectedIndex].value;
  var selected = document.getElementById("selectedMovie");
  selected.src = this.value;
  return false;
}
document.getElementById("movieList").onChange = setMovie();

HTML

<select id="movimg" onChange="setMovie(this)">
  <option value="null.png">Select a movie!</option>
  <option value="bvs.jpg">Batman vs. Superman</option>
  <option value="tjb.jpg">The Jungle Book</option>
  <option value="tgf.jpg">The Godfather</option>
  <option value="tpb.jpg">The Princess Bride</option>
  <br>
</select>
<img src="" id="selectedMovie" />

2 ответа

  1. Вы ссылались movieListна удостоверение личности, которого там не было. Также не нужно возвращать false в функции.

    var select_box = document.getElementById("movimg"),
        image_box = document.getElementById("selectedMovie");
    
    function setMovie() {
      var value = select_box.options[select_box.selectedIndex].value;
      image_box.src = this.value;
    }
    
    select_box.addEventListener("change", setMovie);
    <select id="movimg">
            <option value="null.png">Select a movie!</option>
            <option value="bvs.jpg">Batman vs. Superman</option>
            <option value="tjb.jpg">The Jungle Book</option>
            <option value="tgf.jpg">The Godfather</option>
            <option value="tpb.jpg">The Princess Bride</option>
    </select> 
    <img src="" id="selectedMovie"/>

  2. Вы можете просто изменить свою функцию на эту:

     function setMovie(){
        document.getElementById("selectedMovie").src = document.getElementById("movimg").value;
        }