Onclick doesn't work inside anchor element
Question
I have problem with anchor element and onclick attribute. The idea is that I have main function loadTableWithFilters that gets values from the pet data base and then draws a table with pets. The other functions are intended to change filters and call loadTableWithFilters function again. The problem that I have is with function calls from my html file.
This simply doesn't work
<li><a onclick="filterAllPets()">All Pets</a></li>
It gives me this error
Uncaught ReferenceError: filterAllPets is not defined at HTMLAnchorElement.onclick
What I tried to do to solve this problem:
- moved my
<script>tags before</body> - changed
function loadTableWithFilters ( petData )tovar loadTableWithFilters = function ( petData )
I know that I can give id to anchors and write some snippets like #id.onclick = function() but that's not the intention. I really don't understand why it doesn't work. Please explain it.
Code files
main.html
<!doctype html>
<html>
<head>
<title>~ Purfect Pets ~</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/assignment4-theme.css" />
<link rel="stylesheet" href="css/a4-main.css" />
<!-- development css -->
<style>
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<header>
<div class="center">
<h1 class="app-title">
~ 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">
<!-- tester -->
</tbody>
</table>
</div>
</section>
<footer>
<div class="center">
© 2017 Anton Elistratov
</div>
</footer>
<script src="js/data.js"></script>
<script src="js/a4-main.js"></script>
</body>
</html>
a4-main.js
//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
//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"
}
];
1 answers
solution1
2 ACCPTED 2017-03-25 03:04:18
Just remove it from window.load and it will work.
From this:
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()
to this:
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Inserting rect element inside anchor in svg with javascript doesn't work
Pure Js onclick element doesn't work
onClick doesn't work on custom created element
Anchor doesn't work
ng-click doesn't work on anchor element
anchor tag inside a clickable container doesn't work in Chrome
Anchor link inside iframe resizer doesn't work
onclick doesn't work
getElementsByClassName doesn't work inside div element
Onclick dynamically added with javascript to td element doesn't work
Related Tags