javascript - 两个相互冲突的按钮 HTML

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 s 是唯一的，当你使用 document.getElementById 时要获取 DOM 中的元素，您将获取与 id 匹配的第一个元素充其量是未定义的行为，最坏的情况是。 See this question了解更多信息。

因此，如果两个 anchor 标记最终都触发了“下一步”链接，那是因为您可能给出了整个 <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> .那是因为 +=语义及其工作方式，但基本上一旦你有了 新 按钮，前一个按钮就会被覆盖，你就会失去 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>