我正在尝试获取一个按钮来在javascript中显示过滤结果

Question

我正在尝试创建一个假网站。目前它充满了错误。请暂时忽略这些。它们现在无关紧要。

在“可用的狗”页面（Dogs2Choose.html）上，我有 3 个不同的按钮来显示可用的公狗，但它们都不起作用。

我没有收到任何错误消息，但当我点击按钮时也没有得到任何响应。我在 JavaScript 示例中尝试了多种不同的方法来做到这一点，但没有任何效果。请帮忙！

（我是新手，所以请耐心并使用小词）。

....我尝试使用'.where'，'.filter'，'.forEach'，'.forEvery'，但到目前为止没有任何效果。

请参阅下面的代码。 。 .

按钮1： Dogs2Choose.html：

    <p id="Result">Click button to see Male Dogs</p>
    <button type="button" onclick="MaleDogFunction(DogArray)">Choose Male Dogs </button>

领养.JS:

  const DogArray = [
       {PetName: "Boris", Gender: "Male", Age: "Senior", Breed: "Laborador"}, 
       {PetName: "Lucy", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever"}, 
    ]
    const Result = DogArray.filter(MaleDogFunction);
    function MaleDogFunction(DogArray)  // not sure what goes here
    {
       return Gender = "Male"; //where gender = male;
    }

按钮 2： Dogs2Choose.html：

    <p id="result2">Button 2 </p>
    <button type="button" onclick="search(users)">stackoverflow example</button>

领养.JS:

    var users = [
      {name: 'Boris', gender: 'Male', Age: 'Senior', Breed: 'Chocolate Laborador'},
      {name: 'Lucy', gender: 'Female', Age: 'Puppy', Breed: 'Golden Retriever'}];

    var query = {gender: "Male"};
    var result2 = users.filter(search, query); 
    var element = document.getElementById('result2');
    
    function search(user){
      return Object.keys(this).every((key) => user[key] === this[key]);
    };

这是我的 GitHub 网站的链接。 https://github.com/mflanner1982/PetAdoptionWebsite/commits?author=mflanner1982

Answer 1

这是一个例子，我希望它能帮助你。

我有一个功能来显示一组狗。 还有两个函数创建了过滤后的狗数组。

按钮要么 (0) 显示整个数组，要么 (1) 在显示新数组之前创建具有相同性别的新狗数组。

我使用了

Object.keys

技巧来获取对象所具有的所有字段的列表 - 这使我无需明确询问姓名、性别、年龄和品种 然后，我循环遍历这个数组并提取每个键的对象值，然后创建一个 div 并将可见文本设置为值。

"use strict";

function newEl(tag) {
  return document.createElement(tag)
}

function byId(id) {
  return document.getElementById(id)
}

window.addEventListener('load', onLoaded, false);

class dogT {
  constructor(name = null, gender = null, age = null, breed = null) {
    this.name = name;
    this.gender = gender;
    this.age = age;
    this.breed = breed;
  }
}

const dogArray = [
  new dogT('Boris', 'Male', 'Senior', 'Labrador'),
  new dogT('Lucy', 'Female', 'Puppy', 'Golden Retriever')
];


function onLoaded(evt) {
  byId('allBtn').addEventListener('click', showAll, false);
  byId('fBtn').addEventListener('click', showFemale, false);
  byId('mBtn').addEventListener('click', showMale, false);
}



function showAll(evt) {
  showDogArray(dogArray);
}

function showMale(evt) {
  let inputArray = dogArray.filter((curDog) => curDog.gender == 'Male');
  showDogArray(inputArray);
}

function showFemale(evt) {
  let inputArray = dogArray.filter((curDog) => curDog.gender == 'Female');
  showDogArray(inputArray);
}

function showDogArray(inputArray) {
  let tgt = byId('output');
  tgt.innerHTML = '';

  inputArray.forEach(
    curDog => {
      let container = newEl('div');

      let keys = Object.keys(curDog);
      keys.forEach(
        curKey => {
          let div = newEl('div');
          div.textContent = curDog[curKey];
          container.appendChild(div);
        }
      );
      tgt.appendChild(container);
    }
  )
}

#output>div {
  display: inline-block;
  border: solid 1px #aaa;
  border-radius: 6px;
  padding: 4px;
}

<div class='controls'>
  <button id='allBtn'>Show all</button> | <button id='fBtn'>Show females</button> | <button id='mBtn'>Show males</button>
</div>
<hr>
<div id='output'></div>