javascript - Change image URL upon select event -


i trying change image when option in select list selected. can't figure out im missing.

html

<img class="prime" src="images/image_small.jpg">     <form>         select image size:         <select onchange="biggiesmalls()">             <option value="small">small</option>             <option value="medium">medium</option>             <option value="large">large</option>         </select>     </form>     <p id="optimus"></p> 

js

function biggiesmalls() {     image = document.queryselector(".prime").value;     if (image == "small") {             document.getelementbyid('optimus') = "<img src =    'images/image_small.jpg'>";     }      if (image == "medium"){          document.getelementbyid('optimus') = "<img src = 'images/image_medium.jpg'>";     }       if (image == "large)" {         document.getelementbyid('optimus') = "<img src = 'images/image_large.jpg'>";     } } 

included event biggiesmalls(event) , fixed few syntax errors

and can use event.target.value obtain select's seletecd value. use .innerhtml change content inside <p>

function biggiesmalls(event) {     var image = event.target.value;     if (image == "small") {         document.getelementbyid('optimus').innerhtml = "<img src = 'images/image_small.jpg'>";     }     if (image == "medium") {         document.getelementbyid('optimus').innerhtml = "<img src = 'images/image_medium.jpg'>";     }     if (image == "large") {         document.getelementbyid('optimus').innerhtml = "<img src = 'images/image_large.jpg'>";     } } 

https://jsfiddle.net/lkx0zr16/2/


Comments