如何在锚点标记中使用Javascript变量作为href

Question

我正在设置一个具有类似名称页面的分页系统。我能够建立一个系统，获取我原始页面的url，并创建一个"下一个"one_answers"上一个"链接。然而，这些链接是JS变量的形式，我不知道如何将它们插入锚标记中。

我当前的代码是：

function break_address(url_add) {
var page = url_add.split("/").slice(-1);
var num = url_add.split('page-')[1]; 
[1]; //next
var numnext = parseInt(num)+1;
var numprev = parseInt(num)-1;
var nextpage = "https://MYCOMIC.neocities.org/page-" + numnext + ".html";
var prevpage = "https://MYCOMIC.neocities.org/page-" + numprev + ".html";
//this return is only so that I can make sure the new links were created correctly
return [num, numnext,numprev,nextpage,prevpage]
document.getElementById("next").setAttribute("href",nextpage);
}
//in the real code i am adding the current url with window.location.href instead
var url_add = "https://MYCOMIC.neocities.org/page-2.html"
console.log("Original address: "+url_add)
console.log(break_address(url_add))

<!--the links are set to # right now because I don't know how to set them up. I originally tried setting them as <a id="next">link</a>, but this resulted in an un-clickable link.-->
<a href="#">
<img src="previous.png" alt="PREVIOUS PAGE" style="height: 75px; width: 75px; padding-left 50px, padding-right: 50px;"></a>
<a href="#">
<img src="next.png" alt="NEXT PAGE" style="height: 75px; width: 75px; padding-left 50px, padding-right: 50px;"></a>

在这里的另一个类似问题中，有人建议添加一些类似的内容

document.getElementById("next").href = nextpage;

在脚本中，然后通过执行来回忆

<a id="nextpage">link</a>

然而，当我尝试这样做时，链接无法点击。

我尝试将href添加回锚标记<a href="#" id="nextpage">link</a>(，但随后链接转到我已经访问的同一页面。

我做错了什么？(注意：新生成的url链接到的文件都存在。(

我知道我可以手动链接下一页和上一页。我不想要这个，我想要可以自动链接到Javascript生成的URL的代码。这可能吗？我该怎么做？

Answer 1

这是使用anchor标签的正确方法：

<a href="yourPagePath/page-1.html">link</a>

Answer 2

在这里的另一个类似问题中，有人建议添加一些类似的内容：document.getElementById("next").href = nextpage;

从您提供的html代码中，您似乎从未在a标记上指定id，因此不会检索到任何元素。

然而，另一种解决方案是将html文件的路径嵌入a标记的href中，如so：

<a href="path_to_html_file/page-1.html">link</a>

Answer 3

感谢所有试图提供帮助的人，我最终在我认识的IRL的帮助下解决了这个问题。我的最终代码是这样的：

//takes my current page's url which is in the form path/page-#.html and splits off the #.html
function get_nextpage(url_add) {
var page = url_add.split("/").slice(-1);
var num = url_add.split('page-')[1]; 
[1];
//adds 1 to the number within the #.html, makes a new link which is "nextpage"
var numnext = parseInt(num)+1;
var nextpage = "https://MYCOMIC.neocities.org/page-" + numnext + ".html";
return nextpage;
}
//same but for previous page
function get_prevpage(url_add) {
var page = url_add.split("/").slice(-1);
var num = url_add.split('page-')[1]; 
[1];
var numprev = parseInt(num)-1;
var prevpage = "https://MYCOMIC.neocities.org/page-" + numprev + ".html";
return prevpage;
}
//function which uses the new url whenever my links are clicked
window.onload = function(e) {
var url_add = window.location.href;
var nextpage = get_nextpage(url_add);
var prevpage = get_prevpage(url_add);
document.getElementById("next").onclick = function() {
this.href = nextpage;
console.log(this.href);
};
document.getElementById("prev").onclick = function() {
this.href = prevpage;
console.log(this.href);
};
}();

<a class="button" id="prev" href="#">
<img src="previous.png" alt="PREVIOUS PAGE" style="height: 75px; width: 75px; padding-left 50px, padding-right: 50px;"></a>
<a class="button" id="next" href="#" >
<img src="next.png" alt="NEXT PAGE" style="height: 75px; width: 75px; padding-left 50px, padding-right: 50px;"></a>

它可能比理想的要复杂一些，但它确实有效！