Question

I am still learning javascript and I have problem with my current application
From this fiddle, it’s not working but it can roughly show what I want to achieve.

My output if I chose Banana & Mouse will be:
Banana is yellow
Mouse is small

I want to know how I can call the second function with just one click of the button, and how can I reuse my codes in this case as I have another 5 more select options at the end it.

Thanks!

Answer 1

You can just pass the ids as parameters to the function and manipulate each element value accordingly.

function displayResult (fruitId,sizeId) {
    var selTag = document.getElementById(fruitId);
    var fruit=selTag.options[selTag.selectedIndex].text;
    if (fruit=="Apple") {
      fruit = fruit + " is red";
    } else if (fruit=="Orange") {
      fruit = fruit + " is orange";
    } else if (fruit=="Banana") {
      fruit = fruit + " is yellow";
    }
    selTag = document.getElementById(sizeId);
    var animal=selTag.options[selTag.selectedIndex].text;
    if (animal=="Elephant") {
      animal = animal + " is big";
    } else if (animal=="Mouse") {
      animal = animal + " is small";
    } else if (animal=="Whale") {
      animal = animal + " is enormous";
    }
    document.getElementById('mytextbox').value = fruit+"\n"+animal;;
}

DEMO