在另一个函数中调用 javascript 函数未定义错误

Question

当单击"li"元素文本(例如：所有宠物(时，我正在尝试在HTML网页上显示一个表格，使用DOM修改HTML元素。当我单击该元素(例如：FilterAllPets(( 函数(时，我收到以下错误：

a4-main.js：85 未捕获的引用错误：加载表与筛选器不是 定义 at 过滤器所有宠物 (a4-main.js：85( at HTMLAnchorElement.onclick (main.html：22(

该错误与其他函数一起重复。提前谢谢。

///js file
var filterType = ""; // sets the filter type to "" (will later be dog, cat or bird)
var filterAgeMin = 0; // sets the filter age min to 0 (for no minimum age filter)
var filterAgeMax = Number.MAX_VALUE; // sets the filter age max to the largest number possible (for no maximum age filter)
window.onload = function loadTableWithFilters() {
  for (var i = 0; i < petData.length; i++) {
    if ((filterType == petData[i].type || filterType == "") && petData[i].age >= filterAgeMin && petData[i].age <= filterAgeMax) {
      var tr = document.createElement("tr");
      var td1 = document.createElement("td");
      var img = document.createElement("img");
      img.setAttribute("src", petData[i].image.src);
      img.setAttribute("alt", petData[i].image.alt);
      img.setAttribute("width", petData[i].image.width);
      img.setAttribute("height", petData[i].image.height);
      td1.appendChild(img);
      tr.appendChild(td1);
      var td2 = document.createElement("td");
      td2.setAttribute("style", "text-align:center;");
      var h4 = document.createElement("h4");
      var name = document.createTextNode(petData[i].name);
      h4.appendChild(name);
      td2.appendChild(h4);
      var p = document.createElement("p");
      p.innerHTML = petData[i].description.toString();
      td2.appendChild(p);
      var span = document.createElement("span");
      var age = document.createTextNode("Age: " + petData[i].age + " years old.");
      span.appendChild(age);
      td2.appendChild(span);
      tr.appendChild(td2);
      document.querySelector("#main-table-body").appendChild(tr);
    }
  }
};
function filterDog() {
  filterType = "dog";
  loadTableWithFilters();
};
function filterCat() {
  filterType = "cat";
  loadTableWithFilters();
};
function filterBird() {
  filterType = "bird";
  loadTableWithFilters();
};
function filter_zero_1() {
  filterAgeMin = 0;
  filterAgeMax = 1;
  loadTableWithFilters();
};
function filter_1_3() {
  filterAgeMin = 1;
  filterAgeMax = 3;
  loadTableWithFilters();
};
function filter_4_plus() {
  filterAgeMin = 4;
  filterAgeMax = Number.MAX_VALUE;
  loadTableWithFilters();
};
function filterAllPets() {
  var filterType = "";
  var filterAgeMin = 0;
  var filterAgeMax = Number.MAX_VALUE;
  loadTableWithFilters();
};
/// pet array data 
var petData = [{
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Bella.jpg",
    alt: "Bella",
    width: 120,
    height: 160
  },
  name: "Bella",
  age: 0.5,
  description: "<span>Bella</span> is a bright young pup who loves being around other dogs and doesn't mind the odd cat.<br />Her <span>favourite treat</span> is <span>bacon</span> - anything <span>bacon</span>.",
  type: "dog"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Buddy.jpg",
    alt: "Buddy",
    width: 120,
    height: 160
  },
  name: "Buddy",
  age: 4,
  description: "One of the most friendly dogs currently staying with us is <span>Buddy</span>.<br />He's a little older but has a <span>lot of love</span> to give.<br />His favourite activity is cuddling up and <span>watching a movie</span> with is owner.",
  type: "dog"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Charlie.jpg",
    alt: "Charlie",
    width: 120,
    height: 160
  },
  name: "Charlie",
  age: 3,
  description: "<span>Charlie</span> loves <span>spending time outdoors</span>.  <br />He will chase anything that moves and will spend all day <span>playing fetch</span> in the park. <br />His favourite treat to eat is actually <span>broccoli</span> - crazy I know, but he loves it.",
  type: "dog"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Jasper.jpg",
    alt: "Jasper",
    width: 120,
    height: 160
  },
  name: "Jasper",
  age: 2,
  description: "<span>Jasper</span> is only 2 years (and 3 months) old, but he's already one of the smartest pups we've seen.<br /> He will recognize his <span>toys by name</span> and will always put them back in the toy box when asked.<br />He's the only dog we've seen that <span>tidies up after himself!</span>.",
  type: "dog"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Max.jpg",
    alt: "Max",
    width: 120,
    height: 160
  },
  name: "Max",
  age: 5,
  description: "Our little <span>Max</span> is always happy.<br />He loves to spend his time outdoors <span>playing fetch</span> and <span>going for jogs</span>.<br />  His favourite treats are <span>hot dogs</span> - any variety will do, but he loves Schneiders <span>Red Hots</span> the best.",
  type: "dog"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/David.jpg",
    alt: "David",
    width: 120,
    height: 160
  },
  name: "David",
  age: 0.5,
  description: "<span>David</span> is our smallest kitten at only <span>6 months old</span>! <br />His favourite thing right now is <span>chasing his tail</span> and playing with <span>packing peanuts</span>.<br />He is full of love and will make a welcome addition to any home.",
  type: "cat"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Simba.jpg",
    alt: "Simba",
    width: 120,
    height: 160
  },
  name: "Simba",
  age: 5,
  description: "One of our oldest cats is <span>Simba</span>.<br />  He's over chasing things and is just looking for a nice place to <span>cuddle</span> - usually somebody's lap.<br />  He loves <span>Temptations</span> (any variety) and will <span>come running</span> from anywhere in the house if he suspects treats are on the way.",
  type: "cat"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Sparky.jpg",
    alt: "Sparky",
    width: 120,
    height: 160
  },
  name: "Sparky",
  age: 2,
  description: "<span>Sparky</span> is a very wild cat, but he's a <span>ton of fun</span>.<br />He would happily spend his days chasing <span>bugs</span> or <span>squirrels</span> outside or <span>playing with you</span> inside!<br />  His favourite treat is <span>cottage cheese</span> and will eat it straight from the container if you let him.",
  type: "cat"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Whiffles.jpg",
    alt: "Whiffles",
    width: 120,
    height: 160
  },
  name: "Whiffles",
  age: 3,
  description: "<span>Whiffles</span> is our first <span>hypoallergenic</span> cat.<br />She is very mellow and extremely friendly, making her the perfect indoor cat.<br />Her favourite treat is <span>Tuna</span> straight from the can - any variety.",
  type: "cat"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Widget.jpg",
    alt: "Widget",
    width: 120,
    height: 160
  },
  name: "Widget",
  age: 1.5,
  description: "One of our <span>youngest</span> cats is <span>Widget</span>. <br /> He's only 18 months old and still loves to run and jump and <span>chase his toys</span>.<br />His favourite food is <span>Salmon</span>, but he will always come running for any variety of <span>cat treats</span> (i.e. Temptations, Greenies, etc). ",
  type: "cat"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Augustus.jpg",
    alt: "Augustus",
    width: 120,
    height: 160
  },
  name: "Augustus",
  age: 1.5,
  description: "<span>Augustus</span> has been with us for just over <span>4 months</span>, and already we can see that he's <span>very friendly</span>.<br />  He will <span>chirp</span> and <span>chatter</span> whenever somebody enters the room. ",
  type: "bird"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Joanna.jpg",
    alt: "Joanna",
    width: 120,
    height: 160
  },
  name: "Joanna",
  age: 0.5,
  description: "One of our youngest birds is <span>Joanna</span>.  She is only 6 months old, but is very active.<br />  She loves <span>flying outside</span> of her cage, but will never go far.  Like all birds her age, she loves playing with the &ldquo;<span>bird in the mirror</span>&rdquo;.",
  type: "bird"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Jonathan.jpg",
    alt: "Jonathan",
    width: 120,
    height: 160
  },
  name: "Jonathan",
  age: 3,
  description: "<span>Jonathan</span> is one of our older birds, but is still very friendly and loves to <span>chirp and sing</span> in the morning.<br />  He loves taking <span>baths</span>, so as long as there's a <span>water bowl</span> in his cage, he'll be happy all day.",
  type: "bird"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Sammy.jpg",
    alt: "Sammy",
    width: 120,
    height: 160
  },
  name: "Sammy",
  age: 2.5,
  description: "<span>Sammy</span> is one of our older birds, but he's also the <span>smartest</span>.  He is always trying to <span>mimic</span> whatever sounds are around him.  He is also a very active bird, so be sure you are able to interact with him <span>multiple</span> times a day.<br />His favourite thing is when you <span>scratch</span> under his chin.  ",
  type: "bird"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Suzette.jpg",
    alt: "Suzette",
    width: 120,
    height: 160
  },
  name: "Suzette",
  age: 4,
  description: "The oldest bird currently staying with us is <span>Suzette</span>.  She's extremely <span>cuddly</span> and loves landing on people's glasses, collars, hats, or whatever she can get her little claws on, as long as she can be close.  She's a great <span>companion</span> for anyone looking for a bird that will interact with them and remain <span>close by</span>.",
  type: "bird"
}];

<!doctype html>
<html>
<head>
  <title>WEB222 Assignment 4</title>
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/assignment4-theme.css" />
  <link rel="stylesheet" href="css/a4-main.css" />
  <script src="js/data.js"></script>
  <script src="js/a4-main.js"></script>
</head>
<body>
  <header>
    <div class="center">
      <h1 class="~ Purfect Pets ~">
        ~ Purfect Pets ~
      </h1>
    </div>
  </header>
  <nav>
    <div class="center">
      <ul>
        <li><a onclick="filterAllPets()">All Pets</a></li>
        <li><span>|</span></li>
        <li><a onclick="filterDog()">Dogs</a></li>
        <li><a onclick="filterCat()">Cats</a></li>
        <li><a onclick="filterBird()">Birds</a></li>
        <li><span>|</span></li>
        <li><a onclick="filter_zero_1()">&lt; 1 year</a></li>
        <li><a onclick="filter_1_3()">1 - 3 years</a></li>
        <li><a onclick="filter_4_plus()">4+ years</a></li>
      </ul>
    </div>
  </nav>
  <section class="main center">
    <table class="main-table-top">
      <tbody>
        <tr>
          <th>Photo</th>
          <th>Description</th>
        </tr>
      </tbody>
    </table>
    <div class="main-table-container">
      <table class="main-table">
        <tbody id="main-table-body">
        </tbody>
      </table>
    </div>
  </section>
  <footer>
    <div class="center">
      &copy; 2017
  </footer>
</body>
</html>

Answer 1

问题已解决，只是更改了 window.onload = loadTableWithFilters;.

///js file
var filterType = ""; // sets the filter type to "" (will later be dog, cat or bird)
var filterAgeMin = 0; // sets the filter age min to 0 (for no minimum age filter)
var filterAgeMax = Number.MAX_VALUE; // sets the filter age max to the largest number possible (for no maximum age filter)
window.onload =loadTableWithFilters; 
function loadTableWithFilters() {
document.querySelector("#main-table-body").innerHTML = '';
for (var i = 0; i < petData.length; i++) {
document.querySelector("#main-table-body")
    if ((filterType == petData[i].type || filterType == "") && petData[i].age >= filterAgeMin && petData[i].age <= filterAgeMax) {
      var tr = document.createElement("tr");
      var td1 = document.createElement("td");
      var img = document.createElement("img");
      img.setAttribute("src", petData[i].image.src);
      img.setAttribute("alt", petData[i].image.alt);
      img.setAttribute("width", petData[i].image.width);
      img.setAttribute("height", petData[i].image.height);
      td1.appendChild(img);
      tr.appendChild(td1);
      var td2 = document.createElement("td");
      td2.setAttribute("style", "text-align:center;");
      var h4 = document.createElement("h4");
      var name = document.createTextNode(petData[i].name);
      h4.appendChild(name);
      td2.appendChild(h4);
      var p = document.createElement("p");
      p.innerHTML = petData[i].description.toString();
      td2.appendChild(p);
      var span = document.createElement("span");
      var age = document.createTextNode("Age: " + petData[i].age + " years old.");
      span.appendChild(age);
      td2.appendChild(span);
      tr.appendChild(td2);
      document.querySelector("#main-table-body").appendChild(tr);
    }
  }
};
function filterDog() {
  filterType = "dog";
  loadTableWithFilters();
};
function filterCat() {
  filterType = "cat";
  loadTableWithFilters();
};
function filterBird() {
  filterType = "bird";
  loadTableWithFilters();
};
function filter_zero_1() {
  filterAgeMin = 0;
  filterAgeMax = 1;
  loadTableWithFilters();
};
function filter_1_3() {
  filterAgeMin = 1;
  filterAgeMax = 3;
  loadTableWithFilters();
};
function filter_4_plus() {
  filterAgeMin = 4;
  filterAgeMax = Number.MAX_VALUE;
  loadTableWithFilters();
};
function filterAllPets() {
  var filterType = "";
  var filterAgeMin = 0;
  var filterAgeMax = Number.MAX_VALUE;
  loadTableWithFilters();
};
/// pet array data 
var petData = [{
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Bella.jpg",
    alt: "Bella",
    width: 120,
    height: 160
  },
  name: "Bella",
  age: 0.5,
  description: "<span>Bella</span> is a bright young pup who loves being around other dogs and doesn't mind the odd cat.<br />Her <span>favourite treat</span> is <span>bacon</span> - anything <span>bacon</span>.",
  type: "dog"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Buddy.jpg",
    alt: "Buddy",
    width: 120,
    height: 160
  },
  name: "Buddy",
  age: 4,
  description: "One of the most friendly dogs currently staying with us is <span>Buddy</span>.<br />He's a little older but has a <span>lot of love</span> to give.<br />His favourite activity is cuddling up and <span>watching a movie</span> with is owner.",
  type: "dog"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Charlie.jpg",
    alt: "Charlie",
    width: 120,
    height: 160
  },
  name: "Charlie",
  age: 3,
  description: "<span>Charlie</span> loves <span>spending time outdoors</span>.  <br />He will chase anything that moves and will spend all day <span>playing fetch</span> in the park. <br />His favourite treat to eat is actually <span>broccoli</span> - crazy I know, but he loves it.",
  type: "dog"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Jasper.jpg",
    alt: "Jasper",
    width: 120,
    height: 160
  },
  name: "Jasper",
  age: 2,
  description: "<span>Jasper</span> is only 2 years (and 3 months) old, but he's already one of the smartest pups we've seen.<br /> He will recognize his <span>toys by name</span> and will always put them back in the toy box when asked.<br />He's the only dog we've seen that <span>tidies up after himself!</span>.",
  type: "dog"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Max.jpg",
    alt: "Max",
    width: 120,
    height: 160
  },
  name: "Max",
  age: 5,
  description: "Our little <span>Max</span> is always happy.<br />He loves to spend his time outdoors <span>playing fetch</span> and <span>going for jogs</span>.<br />  His favourite treats are <span>hot dogs</span> - any variety will do, but he loves Schneiders <span>Red Hots</span> the best.",
  type: "dog"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/David.jpg",
    alt: "David",
    width: 120,
    height: 160
  },
  name: "David",
  age: 0.5,
  description: "<span>David</span> is our smallest kitten at only <span>6 months old</span>! <br />His favourite thing right now is <span>chasing his tail</span> and playing with <span>packing peanuts</span>.<br />He is full of love and will make a welcome addition to any home.",
  type: "cat"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Simba.jpg",
    alt: "Simba",
    width: 120,
    height: 160
  },
  name: "Simba",
  age: 5,
  description: "One of our oldest cats is <span>Simba</span>.<br />  He's over chasing things and is just looking for a nice place to <span>cuddle</span> - usually somebody's lap.<br />  He loves <span>Temptations</span> (any variety) and will <span>come running</span> from anywhere in the house if he suspects treats are on the way.",
  type: "cat"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Sparky.jpg",
    alt: "Sparky",
    width: 120,
    height: 160
  },
  name: "Sparky",
  age: 2,
  description: "<span>Sparky</span> is a very wild cat, but he's a <span>ton of fun</span>.<br />He would happily spend his days chasing <span>bugs</span> or <span>squirrels</span> outside or <span>playing with you</span> inside!<br />  His favourite treat is <span>cottage cheese</span> and will eat it straight from the container if you let him.",
  type: "cat"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Whiffles.jpg",
    alt: "Whiffles",
    width: 120,
    height: 160
  },
  name: "Whiffles",
  age: 3,
  description: "<span>Whiffles</span> is our first <span>hypoallergenic</span> cat.<br />She is very mellow and extremely friendly, making her the perfect indoor cat.<br />Her favourite treat is <span>Tuna</span> straight from the can - any variety.",
  type: "cat"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Widget.jpg",
    alt: "Widget",
    width: 120,
    height: 160
  },
  name: "Widget",
  age: 1.5,
  description: "One of our <span>youngest</span> cats is <span>Widget</span>. <br /> He's only 18 months old and still loves to run and jump and <span>chase his toys</span>.<br />His favourite food is <span>Salmon</span>, but he will always come running for any variety of <span>cat treats</span> (i.e. Temptations, Greenies, etc). ",
  type: "cat"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Augustus.jpg",
    alt: "Augustus",
    width: 120,
    height: 160
  },
  name: "Augustus",
  age: 1.5,
  description: "<span>Augustus</span> has been with us for just over <span>4 months</span>, and already we can see that he's <span>very friendly</span>.<br />  He will <span>chirp</span> and <span>chatter</span> whenever somebody enters the room. ",
  type: "bird"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Joanna.jpg",
    alt: "Joanna",
    width: 120,
    height: 160
  },
  name: "Joanna",
  age: 0.5,
  description: "One of our youngest birds is <span>Joanna</span>.  She is only 6 months old, but is very active.<br />  She loves <span>flying outside</span> of her cage, but will never go far.  Like all birds her age, she loves playing with the &ldquo;<span>bird in the mirror</span>&rdquo;.",
  type: "bird"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Jonathan.jpg",
    alt: "Jonathan",
    width: 120,
    height: 160
  },
  name: "Jonathan",
  age: 3,
  description: "<span>Jonathan</span> is one of our older birds, but is still very friendly and loves to <span>chirp and sing</span> in the morning.<br />  He loves taking <span>baths</span>, so as long as there's a <span>water bowl</span> in his cage, he'll be happy all day.",
  type: "bird"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Sammy.jpg",
    alt: "Sammy",
    width: 120,
    height: 160
  },
  name: "Sammy",
  age: 2.5,
  description: "<span>Sammy</span> is one of our older birds, but he's also the <span>smartest</span>.  He is always trying to <span>mimic</span> whatever sounds are around him.  He is also a very active bird, so be sure you are able to interact with him <span>multiple</span> times a day.<br />His favourite thing is when you <span>scratch</span> under his chin.  ",
  type: "bird"
}, {
  image: {
    src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Suzette.jpg",
    alt: "Suzette",
    width: 120,
    height: 160
  },
  name: "Suzette",
  age: 4,
  description: "The oldest bird currently staying with us is <span>Suzette</span>.  She's extremely <span>cuddly</span> and loves landing on people's glasses, collars, hats, or whatever she can get her little claws on, as long as she can be close.  She's a great <span>companion</span> for anyone looking for a bird that will interact with them and remain <span>close by</span>.",
  type: "bird"
}];

<!doctype html>
<html>
<head>
  <title>WEB222 Assignment 4</title>
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/assignment4-theme.css" />
  <link rel="stylesheet" href="css/a4-main.css" />
  <script src="js/data.js"></script>
  <script src="js/a4-main.js"></script>
</head>
<body>
  <header>
    <div class="center">
      <h1 class="~ Purfect Pets ~">
        ~ Purfect Pets ~
      </h1>
    </div>
  </header>
  <nav>
    <div class="center">
      <ul>
        <li><a onclick="filterAllPets()">All Pets</a></li>
        <li><span>|</span></li>
        <li><a onclick="filterDog()">Dogs</a></li>
        <li><a onclick="filterCat()">Cats</a></li>
        <li><a onclick="filterBird()">Birds</a></li>
        <li><span>|</span></li>
        <li><a onclick="filter_zero_1()">&lt; 1 year</a></li>
        <li><a onclick="filter_1_3()">1 - 3 years</a></li>
        <li><a onclick="filter_4_plus()">4+ years</a></li>
      </ul>
    </div>
  </nav>
  <section class="main center">
    <table class="main-table-top">
      <tbody>
        <tr>
          <th>Photo</th>
          <th>Description</th>
        </tr>
      </tbody>
    </table>
    <div class="main-table-container">
      <table class="main-table">
        <tbody id="main-table-body">
        </tbody>
      </table>
    </div>
  </section>
  <footer>
    <div class="center">
      &copy; 2017
  </footer>
</body>
</html>