Ich bin eine Funktion für einen Online-Shop, der Jacken mit benutzerdefinierten Text verkauft.Javascript Stile, hin und her hin und her
Der Code, den ich erstellt habe, ändert den Schriftstil basierend auf dem, was in einem Dropdown-Menü ausgewählt wurde. Das funktioniert gut.
Bei einigen Jackenarten müssen die Linien Positionen verschieben oder gar nicht angezeigt werden. Ich benutze daher die Eigenschaften "top" und "display", um die Linien nach oben oder unten zu verschieben oder "none" anzuzeigen, was wiederum angibt, was auf der Basis des ausgewählten Jacket-Stils in einem Dropdown-Menü zu tun ist.
Das Problem, das ich habe ist, dass der Code, den ich erstellt habe, die Änderungen, die ich angegeben habe, nur wenn ich eine Änderung mache, aber nachfolgende Dropdown-Änderungen werden nicht ausgeführt.
Ich fühle mich wie ich muss einfach etwas in diesem Code (unten) fehlt etwas fehlen.
Irgendwelche Ideen?
<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>