Javascriptスタイル、前後に切り替え

私はカスタムテキストのジャケットを販売するオンラインショップの機能をコーディングしています。Javascriptスタイル、前後に切り替え

私が作成したコードは、ドロップダウンメニューで選択されているものに基づいてフォントスタイルを変更します。それはうまくいきます。

いくつかのジャケットスタイルでは、線が位置を移動するか、まったく表示されません。したがって、「上」と「表示」のスタイルプロパティを使用して行を上下に移動したり、「なし」と表示して、ドロップダウンから選択したジャケットスタイルに基づいて何を行うかを指定します。

問題は、私が作成したコードが、1回の変更を行ったときに指定した変更を行いますが、それ以降のドロップダウンの変更は実行されないということです。

私はちょうどこのコード（以下）で単純なものを欠落している必要がありますように感じる。

アイデア？

<script> 

document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById("productSelect-option-2").addEventListener("change", function() { 

var font = document.getElementById("productSelect-option-2").value; 
    if (font == "Script") 
     document.getElementById("jacket_text").style.fontFamily = "Helvetica,sans-serif"; 
    if (font == "Futura") 
     document.getElementById("jacket_text").style.fontFamily = "Futura,sans-serif"; 
}); 

    document.getElementById("productSelect-option-0").addEventListener("change", function() { 

var jacketStyle = document.getElementById("productSelect-option-0").value; 
    if (jacketStyle == "Cannes") 
     document.getElementById("output_bottom").style.display = ""; 
     document.getElementById("output_top").style.top = "9%"; 
     document.getElementById("output_bottom").style.top = "19%"; 
    if (jacketStyle == "Provence") 
     document.getElementById("output_bottom").style.display = "block"; 
     document.getElementById("output_top").style.top = "9%"; 
     document.getElementById("output_bottom").style.top = "19%"; 
    if (jacketStyle == "Vienne") 
     document.getElementById("output_bottom").style.display = "block"; 
     document.getElementById("output_top").style.top = "9%"; 
     document.getElementById("output_bottom").style.top = "16%"; 
    if (jacketStyle == "Champagne") 
     document.getElementById("output_bottom").style.display = "block"; 
     document.getElementById("output_top").style.top = "9%"; 
     document.getElementById("output_bottom").style.top = "13%"; 
    if (jacketStyle == "Versailles") 
     document.getElementById("output_top").style.top = "9%"; 
     document.getElementById("output_bottom").style.display = "none"; 
    if (jacketStyle == "Le Man") 
     document.getElementById("output_top").style.top = "9%"; 
     document.getElementById("output_bottom").style.display = "none"; 
}); 

}); 
</script>

出典

2016-09-26 user3765693