jsでドロップダウンリストを選択して使用する方法

Question

この問題が発生しました。私はアルゴリズムを選択するためのドロップダウンリストを作成しました。最初のオプションで動作しますが、すべてではありません。手伝っていただけませんか？予め

おかげ

var form1 = document.getElementById('form1'); 
var form2 = document.getElementById('form2'); 
var form3 = document.getElementById('form3'); 

var formArray = [];      
formArray.push(form1.innerHTML); 
formArray.push(form2.innerHTML); 
formArray.push(form3.innerHTML); 

//select drop down list// 

function changeToCal() { 
    dropDownList.selectedIndex--; 
    document.getElementById('form').innerHTML = formArray[dropDownList.selectedIndex]; 
} 

//Calculate // 

document.getElementById('form').addEventListener("submit", 
    function(event) { 
     var fieldy = document.getElementById('fieldy'); 
     var fieldx = document.getElementById('fieldx'); 
     var resultField = document.getElementById('resultField'); 

     var x = parseFloat(fieldx.value); 
     var y = parseFloat(fieldy.value); 

     if(!fieldy.value || !fieldx.value) { 
     alert("Please enter numbers in the fields!"); 
     } else if (dropDownList.selectedIndex = 1) { 
      var result = (y/100) * x; 
      resultField.innerText = "Answer: " + result + "." 
      event.preventDefault(); 

     } else if (dropDownList.selectedIndex = 2) { 
      var result = (100/y) * x; 
      resultField.innerText = "Answer: " + result + "." 
      event.preventDefault(); 
     } else if (dropDownList.selectedIndex = 3) { 
      var result = (y/x) * 100; 
      resultField.innerText = "Answer: " + result + " %." 
      event.preventDefault();   
     } else { 
      resultField.innerText = "Error" 
      event.preventDefault(); 
     } 

     } 
      ); 

https://codepen.io/anon/pen/VMZNwQ

Answer 1

この行：

} else if (dropDownList.selectedIndex = 1) { 

比較を使用する必要があるオペレータではなく代入演算子を等しく等しい：

} else if (dropDownList.selectedIndex === 1) { 

他のif/else節も同様に正しくありません。

まともなIDEを使用することを強くお勧めします。これは、このような間違いの可能性を強調します。

また、これを変更する必要があります。これに

dropDownList.selectedIndex--; 
document.getElementById('form').innerHTML = formArray[dropDownList.selectedIndex]; 

を：

document.getElementById('form').innerHTML = formArray[dropDownList.selectedIndex - 1]; 

selectedIndexが生きている、あなたはそれが--を使用して変更した場合、選択した値が更新されますこと。

結果が出力される方法は、resultFieldの<h3>があると仮定していますが、フォームのいずれかにそのIDが設定されています。

その他の雑多な提案はid属性は文書全体で一意である必要がある...

が含まれます。あなたは現在、3つの隠しフォームを持っていて、各ID（resultField、fieldx、fieldy）を持つ4つの要素につながるHTMLの周りをコピーします。 document.getElementByIdが正しいものをつかむかどうかは運が悪いですか。

これらのフォームのinnerHTMLをコピーするのではなく、CSSを使用して既存のフォームを表示したり隠したりする方がよいでしょう。あるいは、ただ1つのフォームを使用し、関連するテキストを更新して現在のアルゴリズムと一致させることもできます。

フォームのsubmitイベントのリスニングは奇妙に思えます。通常のボタンを使用してclickイベントを聞くのはなぜですか？

3つのフォームを保持することに決めたら、それぞれに別々のボタンハンドラを登録することをお勧めします。あなたのコードの多くが大きなif/elseの中にあるという事実は、あなたが実際にどのモードになっているのかを把握しなければならない単一の関数ではなく、複数の関数を実際に必要としているというサインです。 。