複数の選択値を関数に渡して画像を更新する

Question

どの2つの選択値が選択されたかによって画像を変更したい。これは2つの別個の選択でどのように動的に実行されますか？これまでのところ私のコードです。

Htmlの

<img class="prime" src="images/image_small.jpg"> 
<form> 
Select image size: 
<select onchange="twoselects(this)"> 
<option value="opt1">opt1</option> 
<option value="opt2">opt2</option> 
<option value="opt3">opt3</option> 
</select> 
</form> 
Select image size: 
<select onchange="twoselects(that)"> 
<option value="option1">option1</option> 
<option value="option2">option2</option> 
<option value="option3">option3</option> 
</select> 
<p id="optimus"></p> 

Javascriptを

function twoselects(val, val2) { 
// Not sure why you used this line 
var image = document.querySelector(".prime").value; 

var getValue = val.value; 
var getValue2 = val2.value; 

if (getValue == "opt1" && "option1") { 
document.getElementById('optimus').style.backgroundImage= "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')"; 
} 

else if (getValue == "opt2" && getValue2 == "option2") { 
document.getElementById('optimus').style.backgroundImage= "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')"; 
} 
} 

Answer 1

あなたは一つの引数を送信するが、2..iは、いずれかを送信し、受け入れないあなたをお勧めし受け入れています。指定された例ではundefinedでgetElementByIdまたはquerySelector

thatを使用して要素を選択します。

function twoselects() { 
 
    var size1 = document.querySelector("#size1"); 
 
    var size2 = document.querySelector("#size2"); 
 
    var getValue = size1.value; 
 
    var getValue2 = size2.value; 
 
    if (getValue == "opt1" && getValue2 == "option1") { 
 
    document.getElementById('optimus').style.backgroundImage = "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')"; 
 
    } else if (getValue == "opt2" && getValue2 == "option2") { 
 
    document.getElementById('optimus').style.backgroundImage = "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')"; 
 
    } 
 
} 
 
twoselects();

p { 
 
    width: 100%; 
 
    height: 200px; 
 
}

<img class="prime" src="images/image_small.jpg"> 
 
<form> 
 
    Select image size: 
 
    <select id='size1' onchange="twoselects()"> 
 
    <option value="opt1">opt1</option> 
 
    <option value="opt2">opt2</option> 
 
    <option value="opt3">opt3</option> 
 
    </select> 
 
</form> 
 
Select image size: 
 
<select id='size2' onchange="twoselects()"> 
 
    <option value="option1">option1</option> 
 
    <option value="option2">option2</option> 
 
    <option value="option3">option3</option> 
 
</select> 
 
<p id="optimus"></p>