javascript - テキストエリアへの複数選択オプション

Question

私はまだjavascriptを学んでいて、現在のアプリケーションに問題があります
。このフィドルから、それは機能していませんが、私が達成したいことを大まかに示すことができます。

バナナとマウスを選択した場合の出力は次のようになります。
バナナは黄色
ですマウスは小さいです

ボタンを1回クリックするだけで2番目の関数を呼び出す方法と、最後にさらに5つの選択オプションがあるので、この場合にコードを再利用する方法を知りたいです。

ありがとう！

Answer 1

IDをパラメーターとして関数に渡し、それに応じて各要素の値を操作できます。

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

デモ

Answer 2

あなたはそれをはるかに簡単にすることができます。しかし、ここにあなたがリンクを探していたものがあります

function displayResult (selId) {
    var selTag = document.getElementById(selId);
    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";
}
  document.getElementById('mytextbox').value = fruit;
  animalText();
}

function animalText(){
  var selTag = document.getElementById("size");
    var _size=selTag.options[selTag.selectedIndex].text;

  if (_size=="Elephant") {
  _size = _size + " is big";
} else if (_size=="Mouse") {
  _size = _size + " is small";
} else if (_size=="Whale") {
  _size = _size + " is enormous";
}

      document.getElementById('mytextbox').value = document.getElementById('mytextbox').value +"\n"+ _size;
}