Question

我正在尝试在选择选择列表中的选项时更改图像。我无法弄清楚我失踪了。

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'>";
    }
}

Answer 1

包含的活动biggieSmalls(event) 然后修复了一些语法错误

然后您可以使用event.target.value获取select的seletecd值。使用.innerHTML更改<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/

Answer 2

我认为您正在尝试根据select的值更新src值，在这种情况下，您可以使用简单的正则表达式来执行此操作

＆＃13;

function biggieSmalls(value) {
  var img = document.querySelector(".prime");
  img.src = img.src.replace(/_(small|medium|large)(?=\.)/, '_' + value)
}

＆＃13;

<p id="temp"></p>
<img class="prime" src="images/image_small.jpg">
<form>
  Select image size:
  <select onchange="biggieSmalls(this.value)">
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
  </select>
</form>
<p id="optimus"></p>

＆＃13;

Answer 3

我假设您获得了select的值并且基于该值，您希望在<p id="optimus"></p>

中显示图像

＆＃13;

function biggieSmalls() {
  // I change selector to `select`
  image = document.querySelector("select").value;
  
  // you can also refactor your multiple if statements to a switch statement or if elseif
  if (image == "small") {
    // added `.innerHTML`  
    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'>";

  }

}

＆＃13;

<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>

＆＃13;

Answer 4

您似乎想要更改background元素的p，但

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

不正确。

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

还有一个错字

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

希望此片段能满足您的目的

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')"; 
        }
        }

WORKING EXAMPLE

选择事件时更改图像URL

4 个答案: