Я кодирую функцию для интернет-магазина, который продает куртки с пользовательским текстом.Стили javascript, переходящие назад и вперед
Код, который я создал, изменяет стиль шрифта на основе того, что было выбрано в выпадающем меню. Это прекрасно работает.
На некоторых моделях куртки линии должны перемещаться по позициям или вообще не отображаться. Поэтому я использую свойства стиля «top» и «display» для перемещения строк вверх или вниз или отображения «none», снова указывающего, что должно быть сделано на основе выбранного стиля куртки из выпадающего меню.
Проблема, с которой я столкнулась, заключается в том, что созданный мной код меняет изменения, которые я указал, только когда я делаю одно изменение, но последующие изменения выпадающего меню не будут выполняться.
Я чувствую, что я должен просто пропустить что-то простое в этом коде (ниже).
Любые идеи?
<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>