Javascript样式，来回切换

我正在为网上商店编写一个功能，该网店出售带自定义文本的夹克。Javascript样式，来回切换

我创建的代码基于在下拉菜单中选择的内容改变了字体样式。这工作正常。

在一些外套样式中，线条必须移动位置，或根本不显示。因此，我使用“顶部”和“显示”样式属性向上或向下移动线条，或者显示“无”，再次指定基于下拉框中所选外套样式的操作。

我遇到的问题是我创建的代码仅在进行一项更改时才使指定的更改生效，但后续更改将不会执行。

我觉得我必须在这段代码中忽略一些简单的东西（下面）。

任何想法？

<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