0

I am trying to make in javascript a option select menu where when the user selects one of the choices, an image appears on the right of the list.

This is the code ive done so far, I am really new to JS, I have my function and my code I would just like someone to point me in the right direction. 

<script>
    function setEntree() {
        var img = document.getElementById("image");
        img.src = this.value;
        return false;
    }

    document.getElementById("entree").onchange = setEntree; 
</script> 


<img id="image" src="images%25202/vide.jpg"/>
<select id="entree">
    <option value="vide.jpg" selected>Choisir...</option>
    <option value="salade.jpg">Salade</option>
    <option value="escargot.jpg">Escargot</option>
</select>

vide.png represents a null picture when the first option is selected from the start. My goal is to make a picture of a salad appear when salad is selected, etc.

daremachine
  • 2,503
  • 2
  • 19
  • 33
bourki
  • 43
  • 7
  • 2
    your code is okey but you have bad path because you rewrite it with image only. You need to pass images folder in your function which change the path. Like this ... img.src = "images%25202/" + this.value; – daremachine Sep 28 '17 at 00:14
  • 2
    Works fine, except that the script is loaded and the `getElementById` is null. Move the script to the bottom of the page, or listen for the `DOMContentLoaded` event on `document` to wait for the DOM to load. – Phix Sep 28 '17 at 00:15
  • 1
    https://jsfiddle.net/tjdm37tx/ – Pyromonk Sep 28 '17 at 00:21
  • Thank you everyone. I have made it work. The only thing left is to figure out how to make picture appear on the right and not on the left of the menu. That must sound basic but I always have a hardtime doing those small details. Anyone know how ? I dont want to center it as their will be another menu on the same line. I want it like that on the same line: MENU - picture - menu - picture – bourki Sep 28 '17 at 00:50
  • Try changing your image element to `` to make it appear on the right. – Hayden Passmore Sep 28 '17 at 01:20

0 Answers0