一种更好的方法

Question

我有两个按钮，它们调用相同的JavaScript函数，但参数不同。当我独立测试它们时，它们可以正常工作。但是，当他们在一起时，只有“下一步”按钮起作用。我不确定自己在做什么错。

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("nextBtn").onclick = function () { findImages(linkForward); };
}

Answer 1

一种更好的方法

请继续阅读，以获取有关为什么出现此行为的详细信息。如果需要快速解决方案，请尝试创建和附加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期望id是唯一的，并且当您使用document.getElementById获取DOM中的元素时，您将在第一个与id匹配的元素最佳，而最坏的行为则不确定。 See this question以获得更多信息。

因此，如果两个锚标签最终触发了“下一个”链接，那是因为您可能会给出整个<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>标签，不仅将“ next”标签添加到<div>。这是因为+=的语义以及它们的工作原理，但是基本上，一旦有了 new 按钮，先前的按钮就会被覆盖，并且会丢失附加到其上的onclick处理程序。

解决此问题的方法之一是在为“下一步”按钮创建行为后，重新创建“先前”点击行为。就像下面的代码片段一样：

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>

Answer 2

您正在覆盖第一个分配的a-tag节点：

nextBtnDiv.innerHTML += 
"<a id=\"prevBtn\" name=\"prevBtn\" class=\"button1\" type=\"button\">Previous</a>";

正在创建新节点。因此，第二次

nextBtnDiv.innerHTML += 
"<a id=\"nextBtn\" name=\"nextBtn\" class=\"button1\" type=\"button\" >Next</a>";

与

相同

nextBtnDiv.innerHTML = 

"<a id=\"prevBtn\" name=\"prevBtn\" class=\"button1\" type=\"button\">Previous</a>" 
+ "<a id=\"nextBtn\" name=\"nextBtn\" class=\"button1\" type=\"button\" >Next</a>";

但是现在您要删除第一个分配的节点及其侦听器

最好创建一个节点并将其附加为：

let a = document.createElement('a');
// set a attr ...
nextBtnDiv.appendChild(a);

两个按钮相互冲突HTML

2 个答案:

一种更好的方法

为什么您的代码的行为方式