更好的方法
如果您想详细了解为什么会出现这种行为，请继续阅读。如果您想要一个快速的解决方案，请尝试创建和附加 DOM 元素，而不是直接操作 innerHTML：
const prevBtn = document.createElement("a");
prevBtn.id = "prevBtn";
prevBtn.name = "prevBtn";
prevBtn.class = "button1";
prevBtn.type = "button";
prevBtn.innerHTML = "Previous";
const nextBtn = document.createElement("a");
nextBtn.id = "nextBtn";
nextBtn.name = "nextBtn";
nextBtn.class = "button1";
nextBtn.type = "button";
nextBtn.innerHTML = "Next";
for (let p = 0; p < 2; p++) {
if (fbResults.collection.links[p].prompt == "Previous") {
var linkBack = "" + fbResults.collection.links[p].href;
prevBtn.onclick = function () { findImages(linkBack); };
nextBtnDiv.appendChild(prevBtn);
}
if (fbResults.collection.links[p].prompt == "Next") {
var linkForward = "" + fbResults.collection.links[p].href;
nextBtn.onclick = function () { findImages(linkForward); };
nextBtnDiv.appendChild(nextBtn);
}
}
为什么你的代码的行为方式是这样的
这里发生了一些事情。首先，type="button" 不是<a> 标记中的有效类型。 It is for describing the media type you're linking to. 所以你通常会使用<button> 来进行这种类型的函数调用（我假设它是用于分页）。
其次，在玩弄你的代码时，我意识到我犯了一个你可能也犯过的错误：我给按钮周围的<div> 一个id="nextBtn"，然后使用nextBtnDiv 调用我找到的变量，就像你做的那样。这样做的问题是 HTML 期望 ids 是唯一的，当您使用 document.getElementById 获取 DOM 中的元素时，您将获得与 id 匹配的第一个元素，并且在最坏的。 See this question 了解更多信息。
因此，如果 both 锚标记最终触发“下一步”链接，那是因为您可能给出了整个 <div>（包含两个按钮），而不是下一个按钮本身，onclick 处理程序。
最后，如果您解决了这个问题，您仍然会看到您的上一个按钮在单击时什么也不做。原因如下：
nextBtnDiv.innerHTML += "<a id=\"nextBtn\" name=\"nextBtn\" class=\"button1\" type=\"button\" >Next</a>";
这一行的基本意思是“使nextBtnDiv.innerHTML 等于nextBtnDiv.innerHTML 加 "<a id=\"nextBtn\" name=\"nextBtn\" class=\"button1\" type=\"button\" >Next</a>"”。问题有点棘手。它重新创建两个<a> 标签，不仅仅是添加“下一个”标签到<div>。这是因为 += 语义及其工作方式，但基本上一旦您拥有 new 按钮，前一个按钮就会被覆盖，并且您会丢失附加到它的 onclick 处理程序。
解决此问题的方法之一是在您为“下一个”按钮创建行为后重新创建“上一个”点击行为。就像下面的sn-p：
const nextBtnDiv = document.getElementById("nextBtnDiv");
const fbResults = {
collection: {
links: [
{ prompt: "Previous", href: "previous" },
{ prompt: "Next", href: "next" },
],
},
};
for (let p = 0; p < 2; p++) {
if (fbResults.collection.links[p].prompt == "Previous") {
var linkBack = "" + fbResults.collection.links[p].href;
nextBtnDiv.innerHTML += "<a id=\"prevBtn\" name=\"prevBtn\" class=\"button1\" type=\"button\">Previous</a>";
document.getElementById("prevBtn").onclick = function () { findImages(linkBack); };
}
if (fbResults.collection.links[p].prompt == "Next") {
var linkForward = "" + fbResults.collection.links[p].href;
nextBtnDiv.innerHTML += "<a id=\"nextBtn\" name=\"nextBtn\" class=\"button1\" type=\"button\" >Next</a>";
document.getElementById("prevBtn").onclick = function () { findImages(linkBack); };
document.getElementById("nextBtn").onclick = function () { findImages(linkForward); };
}
}
function findImages(link) { console.log(`Clicked ${link} button`); }
<div id="nextBtnDiv"></div>