CODEWITHSUNDEEP
javascriptjqueryhtmlonload
Mark Samsonovich
Mark Samsonovich

Reputation: 21

javascript working in fiddle but not in my html

this is probably the biggest noob question, but i have code that works in the fiddle and not in my html. What's missing? Here's the fiddle link and below is my index.html: http://jsfiddle.net/b342vq9m/9/

I think it has something to do with the javascript not being called, but i don't know how to do that.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
var atc;
var woodtype;
var tablesize=2;

$("#WM0").show();
  
    $('#SELECTSIZE').on('change', function() {
      if ( this.value === '2')
      {
        tablesize = "2";
      }
      else if ( this.value == '4')
      {
        tablesize = "4";
      }
      else if ( this.value == '8')
      {
        tablesize = "8";
       }
      else
      {
         tablesize = "6";
      }
      
      doit();
      
    });

  
  $("#maple").click(function() {
        woodtype = "M";
        doit();
          $("#WM0").hide();
  });
     
    $("#walnut").click(function() {

        woodtype = "W";
      
        doit();
        
        $("#WM0").hide();
      
    });

function doit(){
      atc = woodtype + tablesize;
      console.log("atc: "+atc);
      
      // hide all the cart divs
      $(".cartdiv").hide();
  
      // unhide the one selected
      $("#"+atc).show();
}
}
</script>

<title>TESTPAGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet">

</head>
<body>


<div id='SELECTWOOD'>
<button id="walnut" value="WALNUT">SOLID WALNUT</button>
<button id="maple"  value="MAPLE">SOLID MAPLE</button>
</div>
<br>
<select id='SELECTSIZE'>
<option value="2">2 SEATER (30")</option>
<option value="4">4-6 SEATER (60")</option>
<option value="6">6 SEATER (76")</option>
<option value="8">8 SEATER (84")</option>
</select>
<br>
<div class="cartdiv" style='display:none;' id='WM0'>ADD TO CART0<br/></div>
<div class="cartdiv" style='display:none;' id='W2'>ADD TO CART1<br/></div>
<div class="cartdiv"  style='display:none;' id='W4'>ADD TO CART2<br/></div>
<div class="cartdiv"  style='display:none;' id='W6'>ADD TO CART3<br/></div>
<div class="cartdiv"  style='display:none;' id='W8'>ADD TO CART4<br/></div>
<div class="cartdiv"  style='display:none;' id='M2'>ADD TO CART5<br/></div>
<div class="cartdiv"  style='display:none;' id='M4'>ADD TO CART6<br/></div>
<div class="cartdiv"  style='display:none;' id='M6'>ADD TO CART7<br/></div>
<div class="cartdiv"  style='display:none;' id='M8'>ADD TO CART8<br/></div>

</body>
</html>

Upvotes: 2

Views: 111

Answers (3)

Wang Liang
Wang Liang

Reputation: 4434

...
function doit() {
        atc = woodtype + tablesize;
        console.log("atc: " + atc);

        // hide all the cart divs
        $(".cartdiv").hide();

        // unhide the one selected
        $("#" + atc).show();
    }
})
</script>

Upvotes: 2

Jeremy Thille
Jeremy Thille

Reputation: 26360

Open your console (F12), it's telling you there is a missing parenthesis just before </script>. The one that closes $(document).ready(. 

   function doit(){
      atc = woodtype + tablesize;
      console.log("atc: "+atc);

      // hide all the cart divs
      $(".cartdiv").hide();

      // unhide the one selected
      $("#"+atc).show();
   }
}) // <--- Here

Upvotes: 1

FF-
FF-

Reputation: 732

Probably it's not working bacause you're missing closing the function on document.ready

...

function doit(){
      atc = woodtype + tablesize;
      console.log("atc: "+atc);

      // hide all the cart divs
      $(".cartdiv").hide();

      // unhide the one selected
      $("#"+atc).show();
}
}); //You are missing the ");" on this part

</script>

Upvotes: 4

Related Questions