title: javascript working in fiddle but not in my html
body: <p>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: <a href="http://jsfiddle.net/b342vq9m/9/" rel="nofollow noreferrer">http://jsfiddle.net/b342vq9m/9/</a></p>
  
  <p>I think it has something to do with the javascript not being called, but i don't know how to do that.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(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();
  }
  }
  &lt;/script&gt;
  
  &lt;title&gt;TESTPAGE&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div id='SELECTWOOD'&gt;
  &lt;button id="walnut" value="WALNUT"&gt;SOLID WALNUT&lt;/button&gt;
  &lt;button id="maple"  value="MAPLE"&gt;SOLID MAPLE&lt;/button&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;select id='SELECTSIZE'&gt;
  &lt;option value="2"&gt;2 SEATER (30")&lt;/option&gt;
  &lt;option value="4"&gt;4-6 SEATER (60")&lt;/option&gt;
  &lt;option value="6"&gt;6 SEATER (76")&lt;/option&gt;
  &lt;option value="8"&gt;8 SEATER (84")&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;
  &lt;div class="cartdiv" style='display:none;' id='WM0'&gt;ADD TO CART0&lt;br/&gt;&lt;/div&gt;
  &lt;div class="cartdiv" style='display:none;' id='W2'&gt;ADD TO CART1&lt;br/&gt;&lt;/div&gt;
  &lt;div class="cartdiv"  style='display:none;' id='W4'&gt;ADD TO CART2&lt;br/&gt;&lt;/div&gt;
  &lt;div class="cartdiv"  style='display:none;' id='W6'&gt;ADD TO CART3&lt;br/&gt;&lt;/div&gt;
  &lt;div class="cartdiv"  style='display:none;' id='W8'&gt;ADD TO CART4&lt;br/&gt;&lt;/div&gt;
  &lt;div class="cartdiv"  style='display:none;' id='M2'&gt;ADD TO CART5&lt;br/&gt;&lt;/div&gt;
  &lt;div class="cartdiv"  style='display:none;' id='M4'&gt;ADD TO CART6&lt;br/&gt;&lt;/div&gt;
  &lt;div class="cartdiv"  style='display:none;' id='M6'&gt;ADD TO CART7&lt;br/&gt;&lt;/div&gt;
  &lt;div class="cartdiv"  style='display:none;' id='M8'&gt;ADD TO CART8&lt;br/&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>