选择事件后更改图像URL [英] Change image URL upon select event

问题描述

在选择列表中的一个选项时，我试图更改图像.我不知道我失踪了.

I am trying to change an image when an option in the select list is selected. I can't figure out that 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'>";
    }
}

推荐答案

似乎您想更改 p 元素的背景，但是

It seems you want to change the background of the p element ,But

document.getElementById('optimus') = "<img src = ....  

不正确.

您必须使用 style 属性的 backgroundImage 属性.

you have to use backgroundImage property of style attribute.

还有一个错字

 if (image == "large)" {
                    ^^ Note Here
        }

希望此代码段可以达到您的目的

Hope this snippet will serve your purpose

HTML

<select onchange="biggieSmalls(this)">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</form>
<p id="optimus"></p>

CSS

p{

  height:200px;
  width:200px;
}

JS

   // Using some dummy Images for demo
 function biggieSmalls(val) {
        var image = document.querySelector(".prime").value; // Not sure why you used this line
        var getValue = val.value;
        if (getValue == "small") {
         document.getElementById('optimus').style.backgroundImage= 

"url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')"; 
         }

        else if (getValue === "medium"){
        document.getElementById('optimus').style.backgroundImage= 

"url('http://assets.worldwildlife.org/photos/946/images/story_full_width/forests-why-matter_63516847.jpg?1345534028')"; 
        } 

        else if (getValue == "large") {
         document.getElementById('optimus').style.backgroundImage= 

"url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')"; 
        }
        }

工作示例

这篇关于选择事件后更改图像URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！