Untitled

leaflet.js:6 Uncaught TypeError: Cannot read property 'call' of undefined
        at e.whenReady (leaflet.js:6)
        at e.addLayer (leaflet.js:6)
        at HTMLDivElement.<anonymous> (Leaflet.html:62)
        at HTMLDivElement.dispatch (jquery.min.js:3)
        at HTMLDivElement.q.handle (jquery.min.js:3)

    leaflet.js:6 Uncaught TypeError: t.onRemove is not a function
        at e.removeLayer (leaflet.js:6)
        at HTMLDivElement.<anonymous> (Leaflet.html:60)
        at HTMLDivElement.dispatch (jquery.min.js:3)
        at HTMLDivElement.q.handle (jquery.min.js:3)

   leaflet.js:6 Uncaught TypeError: t.onRemove is not a function
        at e.removeLayer (leaflet.js:6)
        at HTMLDivElement.<anonymous> (Leaflet.html:60)
        at HTMLDivElement.dispatch (jquery.min.js:3)
        at HTMLDivElement.q.handle (jquery.min.js:3)

<button id="blank><a href="index_blank.html">

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Loading GeoJSON</title>

<meta charset="UTF-8">
<link rel="stylesheet" href="css/layerbutton.css" />
<link rel="stylesheet" href="leaflet/leaflet.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab'      rel='stylesheet'
text='text/css'>
<link rel="stylesheet"    href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />

</head>
<body>
<h1>My map</h1>
<div id='mapdiv' style='height:500px;'>here lies a map.</div>
<div id="tileBar">
<div class="layerButt" id="pointButt"><h3> TTC On/Off</h3></div>
</div>
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/ttc.js"></script>

<script>
// <script> powers up script
    var mymap = L.map('mapdiv').setView([43,-79],8);

    L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3BhdGlhbGFydHMiLCJhIjoiY2l3c2NlcnJkMTR1YTJ5dGJzYTJuZ3oyMSJ9.qIr2uFfZbZzrDHaJBccYeQ', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    minZoom: 6,
    maxZoom: 16,
//choose project id/dataset from map box studio
    id: 'n/a,(and chose not to add this, the tile layer opens )
//accessToken id from map box account
    accessToken: n/a (I chose not to add this, the tile layer does open)

}).addTo(mymap);

function attach (feature,layer) {
    layer.bindPopup("<h1 class='infoHeader'> Toronto TTC Subway Name</h1><p     class='infoHeader'>" + feature.properties.SBWAY_NAME +"</p>");
};

    L.geoJSON(ttc,{

        onEachFeature: attach

}).addTo(mymap);


// closes script
</script>

<script>

$("#pointButt").click(function(){

    if(mymap.hasLayer(ttc)){
        mymap.removeLayer(ttc);
    } else {
        mymap.addLayer(ttc);
    };

});

</script>

html, body, #mapdiv{
    height: 100%;
    width: 100%;
}

.layerButt{
    padding: 5px;
    background-color: orange;
    color: black;
    font-size: 22px;
    font-family: Roboto Slab;
    width: auto;
    height: auto;
    cursor: pointer;
    margin: 5px;
}

#tileBar {
    height: auto;
    width: 100%;
    position: absolute;
    top:0;
    background-color: black;
}