我有两个按钮调用相同的 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); };
}
最佳答案
更好的方法
如果您想详细了解为什么会出现这种行为,请继续阅读。如果你想要一个快速的解决方案,尝试创建和附加 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>
关于javascript - 两个相互冲突的按钮 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55194146/