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'>"; } }
Comments
Post a Comment