我正在尝试创建一个网站，用户可以点击按钮，它将从数组返回数据。例如，一个名为“显示公狗”的按钮应该会带回数组中的 3 只公狗。
我没有看到任何错误，但是当我单击按钮时没有任何反应。
<!DOCTYPE html>
<html lang="en">
<body>
<main>
<br> <!-- ******************* Button *********************** -->
<button onclick="showMales()"> # Show Male Dogs </button>
<p id="btn"></p>
<br> <!-- ******************* JS Code *********************** -->
<script>
const dogArray = [
{Name: "Boris", Gender: "Male", Age: "Senior", Breed: "Labrador", Link: "Boris.html"},
{Name: "Lucy", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Lucy.html"},
{Name: "Daisy", Gender: "Female", Age: "Senior", Breed: "Golden Retriever", Link: "Daisy.html"},
{Name: "Honey", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Honey.html"},
{Name: "Harley", Gender: "Male", Age: "Senior", Breed: "Labrador", Link: "Haryley.html"},
{Name: "Dolly", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Dolly.html"},
{Name: "Max", Gender: "Male", Age: "Senior", Breed: "Golden Retriever", Link: "Max.html"},
{Name: "Birdie", Gender: "Female", Age: "Senior", Breed: "Pregnant Hog", Link: "Birdie.html"},
];
function showMales(dog) {
return dog.Gender === "Male";
}
console.log(dogArray.find(showMales));
</script>
</main>
</body>
您需要使用过滤功能而不是查找功能。 find 函数应返回第一个匹配项，而 filter 则根据条件获取所有匹配项
<!DOCTYPE html>
<html lang="en">
<body>
<main>
<br> <!-- ******************* Button *********************** -->
<button onclick="showMales()"> # Show Male Dogs </button>
<p id="btn"></p>
<br> <!-- ******************* JS Code *********************** -->
<script>
const dogArray = [
{Name: "Boris", Gender: "Male", Age: "Senior", Breed: "Labrador", Link: "Boris.html"},
{Name: "Lucy", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Lucy.html"},
{Name: "Daisy", Gender: "Female", Age: "Senior", Breed: "Golden Retriever", Link: "Daisy.html"},
{Name: "Honey", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Honey.html"},
{Name: "Harley", Gender: "Male", Age: "Senior", Breed: "Labrador", Link: "Haryley.html"},
{Name: "Dolly", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Dolly.html"},
{Name: "Max", Gender: "Male", Age: "Senior", Breed: "Golden Retriever", Link: "Max.html"},
{Name: "Birdie", Gender: "Female", Age: "Senior", Breed: "Pregnant Hog", Link: "Birdie.html"},
];
function showMales(dog) {
return dog.Gender === "Male";
}
console.log(dogArray.filter(showMales));
</script>
</main>
</body>