Как я могу использовать переменную Javascript как href внутри тега привязки? - PullRequest
Новая
       51

Как я могу использовать переменную Javascript как href внутри тега привязки?

0 голосов
/ 08 марта 2020

Я настраиваю систему разбивки на страницы с одноименными страницами. Мне удалось настроить систему, которая берет URL моей исходной страницы и создает ссылку «следующая» и «предыдущая». Однако эти ссылки представлены в виде 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, существуют.)

Я знаю, что могу связать следующую и предыдущую страницы вручную. Я не хочу этого, я хочу код, который может автоматически ссылаться на URL, сгенерированные Javascript. Это возможно? Как я мог это сделать?

Ответы [ 3 ]

0 голосов
/ 08 марта 2020

В другом подобном вопросе здесь кто-то предложил добавить что-то вроде: document.getElementById("next").href = nextpage;

Из предоставленного вами кода html кажется, что вы никогда не указывали id для тега a, поэтому элемент не извлекается.

Однако, другим решением было бы просто вставить путь к файлу html в ссылку на тег a следующим образом:

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

0 голосов
/ 09 марта 2020

Спасибо за всех, кто пытался помочь, в итоге я понял это с помощью кого-то, кого я знаю, 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>

Это может быть немного сложнее, чем идеально, но это работает!

0 голосов
/ 08 марта 2020

Это правильный способ использования тега anchor: 

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