Bir görüntüyü güncellemek için bir fonksiyona birden fazla giriş değeri aktarın

Question

İki giriş değerinin girilmesine bağlı olarak bir görüntüyü değiştirmek istiyorum. Bu, iki ayrı girdiyle dinamik olarak nasıl yapılır? İşte benim kodum şu ana kadar.

function twoinputs() { 
 
    var size1 = document.getElementById("size1").value; 
 
    var size2 = document.getElementById("size2").value; 
 
    var getValue = size1.value; 
 
    var getValue2 = size2.value; 
 
    if (getValue == "1" && getValue2 == "1") { 
 
    document.getElementById('optimus').style.backgroundImage = "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')"; 
 
    } else if (getValue == "2" && getValue2 == "2") { 
 
    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: 
 
    <input id='size1' name='size1' onchange="twoinputs()"> 
 
    <input id='size2' name='size2' onchange="twoinputs()"> 
 
</form> 
 
<p id="optimus"></p>

tüm

Answer 1

Birincisi, girişler kendine kapanan, bu nedenle komut olarak

<img class="prime" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif"> 
<form> 
    Select image size: 
    <input id='size1' name='size1'> 
    <input id='size2' name='size2'> 
</form> 
<p id="optimus"></p> 

için HTML değiştirmek, sorun değerini alıyoruz olmasıdır iki kez ve işlevin isimlerini ve bazı değişkenleri karıştırdınız.

Ayrıca kullanabilirsiniz uygun olay işleyicileri

var elem1 = document.getElementById("size1"); 
var elem2 = document.getElementById("size2"); 
var image = document.getElementById('optimus'); 

function twoinputs() { 
    var size1 = +elem1.value; 
    var size2 = +elem2.value; 

    if (size1 === 1 && size2 === 1) { 
     image.style.backgroundImage = "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')"; 
    } else if (size1 == 2 && size2 == 2) { 
     image.style.backgroundImage = "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')"; 
    } 
} 

twoinputs(); 

elem1.addEventListener('change', twoinputs, false); 
elem2.addEventListener('change', twoinputs, false); 

FIDDLE

Answer 2

Tamam görünüyor, ama size1.value öznitelik değeri olmaz bu yüzden başka bir deyişle, iki kez .Value var:

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