CODEWITHSUNDEEP
javascripthtmlcssstyles
user3765693
user3765693

Reputation: 37

Javascript styles, toggling back and forth

I am coding a feature for an online shop that sells jackets with custom text.

The code I have created changes the font style based off what has been selected in a dropdown menu. That is working fine.

On some jacket styles the lines have to move positions, or not display at all. I therefore am using the "top" and "display" style properties to move the lines up or down, or displaying "none", again specifying what is to be done based off the selected jacket style from a dropdown.

The problem I'm having is that the code I've created makes the changes I've specified only when I make one change, but subsequent dropdown changes won't execute.

I feel like I must just be missing something simple in this code (below).

Any ideas?

<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>

Upvotes: 1

Views: 37

Answers (1)

user3765693
user3765693

Reputation: 37

Nevermind. I figured it out.

Silly mistake, but I don't really know javascript very well and am just piecing all this together:

Was missing the { } braces for each "if" statement.

Upvotes: 1

Related Questions