Javascript Onclick不'；不要在锚元件内工作
我对锚定元素和onclick属性有问题。我的想法是，我有一个主函数Javascript Onclick不'；不要在锚元件内工作,javascript,html,dom,onclick,dom-events,Javascript,Html,Dom,Onclick,Dom Events,我对锚定元素和onclick属性有问题。我的想法是，我有一个主函数loadTableWithFilters，它从pet数据库中获取值，然后用pets绘制一个表。其他函数用于更改过滤器并再次调用loadTableWithFilters函数。我遇到的问题是html文件中的函数调用 这根本不起作用 <li><a onclick="filterAllPets()">All Pets</a></li> a4main.js //a4-ma
loadTableWithFiltersloadTableWithFilters<li><a onclick="filterAllPets()">All Pets</a></li>
//a4-main.js
window.onload = function() {
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)
//
var loadTableWithFilters = function ( petData ){
var htmlRow = document.querySelector('#main-table-body');//getting my placeholder
htmlRow.innerHTML = "";//clearing
var i;//for loop increment
for (i = 0; i < petData.length; i++){
//$('#main-table-body tr td').append('<img src="' + petData[i].image.src + '"/>');
//getting image
if (petData[i].type === filterType || filterType === "" && petData[i].age >= filterAgeMin && petData[i].age <= filterAgeMax){
var image = document.createElement('img');
image.src = petData[i].image.src;
image.alt = petData[i].image.alt;
image.height = petData[i].image.height;
image.width = petData[i].image.width;
//getting name
var name = document.createElement('h4');
name.textContent = petData[i].name;
//getting description
var description = document.createElement('p');
description.innerHTML = petData[i].description;
//getting age
var age = document.createElement('span');
age.textContent = petData[i].age;
var type = petData[i].type;
//append('<li><img src="' + imgSrc[i] + '"/></li>');
var fullRow = document.createElement('tr');
var colLeft = document.createElement('td');
var colRight = document.createElement('td');
colLeft.appendChild(image);
colRight.appendChild(name);
colRight.appendChild(description);
colRight.appendChild(age);
//table assembly
fullRow.appendChild(colLeft);
fullRow.append(colRight);
htmlRow.appendChild(fullRow);
}
}//for (i = 0; i < petData.length; i++)
}
/* My filters */
//filters dogs
var filterDog = function () {
filterType = "dog";
loadTableWithFilters( petData );
}
//filters cats
var filterCat = function () {
filterType = "cat";
loadTableWithFilters( petData );
}
var filterBird = function () {
filterType = "bird";
loadTableWithFilters( petData );
}
//must be invoked when the user clicks "< 1 year"
var filter_zero_1 = function (){
filterAgeMin = 0;
filterAgeMax = 1;
loadTableWithFilters( petData );
}
//must be invoked when the user clicks "1 - 3 years"
var filter_1_3 = function (){
filterAgeMin = 1;
filterAgeMax = 3;
loadTableWithFilters( petData );
}
//must be invoked when the user clicks "4+ years"
var filter_4_plus = function () {
filterAgeMin = 4;
filterAgeMax = Number.MAX_VALUE;
loadTableWithFilters( petData );
}
/*This function simply sets the global filterType variable to "", the filterAgeMin variable to 0, the filterAgeMax variable to Number.MAX_VALUE and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks "All Pets"*/
var filterAllPets = function () {
filterType = "";
filterAgeMin = 0;
filterAgeMax = Number.MAX_VALUE;
loadTableWithFilters( petData );
}
//function call
loadTableWithFilters( petData );
};//window.onload = function()
//data.js
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"
}
];
//a4-main.js
window.onload=函数（）{
var filterType=”“；//将过滤器类型设置为“”（稍后将为狗、猫或鸟）
var filterAgeMin=0；//将筛选器年龄最小值设置为0（对于无最小年龄筛选器）
var filterAgeMax=Number.MAX_VALUE；//将过滤器最大使用年限设置为可能的最大值（对于没有最大使用年限的过滤器）
//
var loadTableWithFilters=函数（petData）{
var htmlRow=document.querySelector（“#主表体”）；//获取我的占位符
htmlRow.innerHTML=“；//清除
var i；//用于循环增量
对于（i=0；iwindow.onload = function() {
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)
//
var loadTableWithFilters = function(petData) {
var htmlRow = document.querySelector('#main-table-body'); //getting my placeholder
htmlRow.innerHTML = ""; //clearing
var i; //for loop increment
for (i = 0; i < petData.length; i++) {
//$('#main-table-body tr td').append('<img src="' + petData[i].image.src + '"/>');
//getting image
if (petData[i].type === filterType || filterType === "" && petData[i].age >= filterAgeMin && petData[i].age <= filterAgeMax) {
var image = document.createElement('img');
image.src = petData[i].image.src;
image.alt = petData[i].image.alt;
image.height = petData[i].image.height;
image.width = petData[i].image.width;
//getting name
var name = document.createElement('h4');
name.textContent = petData[i].name;
//getting description
var description = document.createElement('p');
description.innerHTML = petData[i].description;
//getting age
var age = document.createElement('span');
age.textContent = petData[i].age;
var type = petData[i].type;
//append('<li><img src="' + imgSrc[i] + '"/></li>');
var fullRow = document.createElement('tr');
var colLeft = document.createElement('td');
var colRight = document.createElement('td');
colLeft.appendChild(image);
colRight.appendChild(name);
colRight.appendChild(description);
colRight.appendChild(age);
//table assembly
fullRow.appendChild(colLeft);
fullRow.append(colRight);
htmlRow.appendChild(fullRow);
}
} //for (i = 0; i < petData.length; i++)
}
/* My filters */
//filters dogs
var filterDog = function() {
filterType = "dog";
loadTableWithFilters(petData);
}
//filters cats
var filterCat = function() {
filterType = "cat";
loadTableWithFilters(petData);
}
var filterBird = function() {
filterType = "bird";
loadTableWithFilters(petData);
}
//must be invoked when the user clicks "< 1 year"
var filter_zero_1 = function() {
filterAgeMin = 0;
filterAgeMax = 1;
loadTableWithFilters(petData);
}
//must be invoked when the user clicks "1 - 3 years"
var filter_1_3 = function() {
filterAgeMin = 1;
filterAgeMax = 3;
loadTableWithFilters(petData);
}
//must be invoked when the user clicks "4+ years"
var filter_4_plus = function() {
filterAgeMin = 4;
filterAgeMax = Number.MAX_VALUE;
loadTableWithFilters(petData);
}
/*This function simply sets the global filterType variable to "", the filterAgeMin variable to 0, the filterAgeMax variable to Number.MAX_VALUE and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks "All Pets"*/
var filterAllPets = function() {
filterType = "";
filterAgeMin = 0;
filterAgeMax = Number.MAX_VALUE;
loadTableWithFilters(petData);
}
//function call
loadTableWithFilters(petData);
}; //window.onload = function()
window.onload=function（）{
var filterType=”“；//将过滤器类型设置为“”（稍后将为狗、猫或鸟）
var filterAgeMin=0；//将筛选器年龄最小值设置为0（对于无最小年龄筛选器）
var filterAgeMax=Number.MAX_VALUE；//将过滤器最大使用年限设置为可能的最大值（对于没有最大使用年限的过滤器）
//
var loadTableWithFilters=函数（petData）{
var htmlRow=document.querySelector（“#主表体”）；//获取我的占位符
htmlRow.innerHTML=“；//清除
var i；//用于循环增量
对于（i=0；iwindow.onload = function() {
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)
//
var loadTableWithFilters = function(petData) {
var htmlRow = document.querySelector('#main-table-body'); //getting my placeholder
htmlRow.innerHTML = ""; //clearing
var i; //for loop increment
for (i = 0; i < petData.length; i++) {
//$('#main-table-body tr td').append('<img src="' + petData[i].image.src + '"/>');
//getting image
if (petData[i].type === filterType || filterType === "" && petData[i].age >= filterAgeMin && petData[i].age <= filterAgeMax) {
var image = document.createElement('img');
image.src = petData[i].image.src;
image.alt = petData[i].image.alt;
image.height = petData[i].image.height;
image.width = petData[i].image.width;
//getting name
var name = document.createElement('h4');
name.textContent = petData[i].name;
//getting description
var description = document.createElement('p');
description.innerHTML = petData[i].description;
//getting age
var age = document.createElement('span');
age.textContent = petData[i].age;
var type = petData[i].type;
//append('<li><img src="' + imgSrc[i] + '"/></li>');
var fullRow = document.createElement('tr');
var colLeft = document.createElement('td');
var colRight = document.createElement('td');
colLeft.appendChild(image);
colRight.appendChild(name);
colRight.appendChild(description);
colRight.appendChild(age);
//table assembly
fullRow.appendChild(colLeft);
fullRow.append(colRight);
htmlRow.appendChild(fullRow);
}
} //for (i = 0; i < petData.length; i++)
}
/* My filters */
//filters dogs
var filterDog = function() {
filterType = "dog";
loadTableWithFilters(petData);
}
//filters cats
var filterCat = function() {
filterType = "cat";
loadTableWithFilters(petData);
}
var filterBird = function() {
filterType = "bird";
loadTableWithFilters(petData);
}
//must be invoked when the user clicks "< 1 year"
var filter_zero_1 = function() {
filterAgeMin = 0;
filterAgeMax = 1;
loadTableWithFilters(petData);
}
//must be invoked when the user clicks "1 - 3 years"
var filter_1_3 = function() {
filterAgeMin = 1;
filterAgeMax = 3;
loadTableWithFilters(petData);
}
//must be invoked when the user clicks "4+ years"
var filter_4_plus = function() {
filterAgeMin = 4;
filterAgeMax = Number.MAX_VALUE;
loadTableWithFilters(petData);
}
/*This function simply sets the global filterType variable to "", the filterAgeMin variable to 0, the filterAgeMax variable to Number.MAX_VALUE and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks "All Pets"*/
var filterAllPets = function() {
filterType = "";
filterAgeMin = 0;
filterAgeMax = Number.MAX_VALUE;
loadTableWithFilters(petData);
}
//function call
loadTableWithFilters(petData);
}; //window.onload = function()
window.onload=function（）{
var filterType=”“；//将过滤器类型设置为“”（稍后将为狗、猫或鸟）
var filterAgeMin=0；//将筛选器年龄最小值设置为0（对于无最小年龄筛选器）
var filterAgeMax=Number.MAX_VALUE；//将过滤器最大使用年限设置为可能的最大值（对于没有最大使用年限的过滤器）
//
var loadTableWithFilters=函数（petData）{
var htmlRow=document.querySelector（“#主表体”）；//获取我的占位符
htmlRow.innerHTML=“；//清除
var i；//用于循环增量
对于（i=0；ipetData
在不同的文件中。如何在a4-main.js中加载获取petData检查脚本是否加载petData
在不同的文件中。如何在a4-main.js中加载获取petData
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)
//
var loadTableWithFilters = function(petData) {
var htmlRow = document.querySelector('#main-table-body'); //getting my placeholder
htmlRow.innerHTML = ""; //clearing
var i; //for loop increment
for (i = 0; i < petData.length; i++) {
//$('#main-table-body tr td').append('<img src="' + petData[i].image.src + '"/>');
//getting image
if (petData[i].type === filterType || filterType === "" && petData[i].age >= filterAgeMin && petData[i].age <= filterAgeMax) {
var image = document.createElement('img');
image.src = petData[i].image.src;
image.alt = petData[i].image.alt;
image.height = petData[i].image.height;
image.width = petData[i].image.width;
//getting name
var name = document.createElement('h4');
name.textContent = petData[i].name;
//getting description
var description = document.createElement('p');
description.innerHTML = petData[i].description;
//getting age
var age = document.createElement('span');
age.textContent = petData[i].age;
var type = petData[i].type;
//append('<li><img src="' + imgSrc[i] + '"/></li>');
var fullRow = document.createElement('tr');
var colLeft = document.createElement('td');
var colRight = document.createElement('td');
colLeft.appendChild(image);
colRight.appendChild(name);
colRight.appendChild(description);
colRight.appendChild(age);
//table assembly
fullRow.appendChild(colLeft);
fullRow.append(colRight);
htmlRow.appendChild(fullRow);
}
} //for (i = 0; i < petData.length; i++)
}
/* My filters */
//filters dogs
var filterDog = function() {
filterType = "dog";
loadTableWithFilters(petData);
}
//filters cats
var filterCat = function() {
filterType = "cat";
loadTableWithFilters(petData);
}
var filterBird = function() {
filterType = "bird";
loadTableWithFilters(petData);
}
//must be invoked when the user clicks "< 1 year"
var filter_zero_1 = function() {
filterAgeMin = 0;
filterAgeMax = 1;
loadTableWithFilters(petData);
}
//must be invoked when the user clicks "1 - 3 years"
var filter_1_3 = function() {
filterAgeMin = 1;
filterAgeMax = 3;
loadTableWithFilters(petData);
}
//must be invoked when the user clicks "4+ years"
var filter_4_plus = function() {
filterAgeMin = 4;
filterAgeMax = Number.MAX_VALUE;
loadTableWithFilters(petData);
}
/*This function simply sets the global filterType variable to "", the filterAgeMin variable to 0, the filterAgeMax variable to Number.MAX_VALUE and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks "All Pets"*/
var filterAllPets = function() {
filterType = "";
filterAgeMin = 0;
filterAgeMax = Number.MAX_VALUE;
loadTableWithFilters(petData);
}
//function call
loadTableWithFilters(petData);