我对锚元素和onclick属性有疑问。这个想法是,我有主要功能loadTableWithFilters从宠物数据库中获取值,然后绘制一个带有宠物的表。其他功能旨在更改过滤器并再次调用loadTableWithFilters函数。我的问题是来自我的html文件的函数调用。

这根本行不通

<li><a onclick="filterAllPets()">All Pets</a></li>


它给我这个错误


  未捕获的ReferenceError:未定义filterAllPets
      在HTMLAnchorElement.onclick


我试图解决此问题的方法:


将我的<script>标记移到了</body>之前
function loadTableWithFilters ( petData )更改为var loadTableWithFilters = function ( petData )


我知道我可以给锚定id并写一些代码片段,例如#id.onclick = function(),但这不是故意的。我真的不明白为什么它不起作用。请解释一下。谢谢!

代码文件

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()">&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">
                    <!-- tester -->




                    </tbody>
                </table>
            </div>
        </section>
        <footer>
            <div class="center">
                &copy; 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 &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"
  }
];

最佳答案

只需将其从window.load中删除,它将起作用。

由此:

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()


对此:

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);

10-08 07:50