treehouse : what would you like to learn today?
Web Design Web Development iOS Development

CodePen - JS not working in full?

  • http://codepen.io/seanjacob/full/reHIw

    My function is not defined in full mode.

    I can add the JS to the HTML box and get it working though.

  • Well something happens in Pen mode.

    Could this be a document.ready issue?

  • Interesting, apparently codepen wraps the JavaScript in a self-invoking function in full mode, so your function doesn't get added to global scope.

      <script>
    (function() {
    
    function tabs(x){
      x.className += " active";
    
      var tab = x.id;
    
      switch(tab){
        case "btn_desc":
          document.getElementById("btn_spec").className="";
          break;
    
        case "btn_spec":
          document.getElementById("btn_desc").className="";
          break;
      }
    }
    
    })();
      </script>
    
  • Try window.tab = function(x) { ... } instead of function tab(x) { ... }

  • Thank you this works but function tab(x) should work too. I have now submitted the bug anyways.

  • Already told you why function tab(x) { ... } didn't work. You've submitted it as bug to codepen? I'm curious if they are going to fix that because I think if you had the click listeners in JavaScript instead of inlined with the html (as you should have) it would have worked. Keeping scripting and markup separate. Nevertheless it's a bug.