当点击“li”元素文本时，我试图在HTML网页上显示一个表格（例如：所有宠物），使用DOM修改HTML元素。当我单击元素（例如：FilterAllPets（）函数）时，我收到以下错误：
a4-main.js：85未捕获的ReferenceError：loadTableWithFilters不是 定义 在filterAllPets（a4-main.js：85） 在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 “<span>bird in the mirror</span>”.",
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()">< 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">
© 2017
</footer>
</body>
</html>
答案 0 :(得分：0)
问题已解决，只是更改了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 “<span>bird in the mirror</span>”.",
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()">< 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">
© 2017
</footer>
</body>
</html>