Mehrere Eingabewerte an eine Funktion übergeben, um ein Bild zu aktualisieren

Question

Ich möchte ein Bild ändern, abhängig davon, welche zwei Eingabewerte eingegeben wurden. Wie würde dies dynamisch mit zwei getrennten Eingängen geschehen? Hier ist mein Code soweit.

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>

Answer 1

Zu allererst Eingänge selbstschließend sind, so das HTML ändern zu

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

Im Skript, das Problem ist, dass Sie den Wert, wenn es darum zweimal, und Sie haben die Namen der Funktion und einige Variablen verwechselt.

Sie auch richtige Event-Handler

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

Sieht ok, aber Sie haben .value zweimal so size1.value den Attributwert, also haben nicht nutzen konnte:

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();