What is the best way in JavaScript to target a specific element in a href attribute in order to create Previous and

Question

What is the best way in JavaScript to target a specific element in a href attribute in order to create Previous and

<li><a href="/chapter-1.html">Ch. 1 - TitleHere</a></li>
<li><a href="/chapter-2.html">Ch. 2 - TitleHere</a></li>
<li><a href="/chapter-3.html">Ch. 3 - TitleHere</a></li>
<li><a href="/chapter-4.html">Ch. 4 - TitleHere</a></li>
<li><a href="/chapter-5.html">Ch. 5 - TitleHere</a></li>

These links lead to various static pages on my website, each identified by a number in the URL.

I am now looking to create buttons that link to the next and previous pages by adjusting the numbers in the URLs accordingly. However, I am struggling to find a way to target these numbers within the href attribute.

For now, I am simply setting up an alert function.

<button type="button" onclick="getURL();">Get Page URL</button>
    
    <script>
      var current = window.location.pathname;
        function getURL() {
        alert(current + 1);
      }
    </script>

javascript html jquery css

Answer 1

Answer №1

Utilize the current URL to your advantage, as you are currently doing.

After obtaining the URL string, split it at the chapter- string. This will result in an array with two strings. The first element contains the full URL up to and including the / character before the chapter-, while the second element includes the number followed by .html. By removing .html from that element, you can extract the number.

To generate the URL when the user clicks the Next button, retrieve the number and if it's less than 5, increment it by 1. Create the desired (relative) URL by combining chapter- + the new n + .html. Then redirect to this URL using window location.

The process for the Previous button is similar, except the condition is that the number must be greater than 1 and then decrease it by 1.

<button type="button" onclick="previous();">Previous</button>
<button type="button" onclick="next();">Next</button>
    
    <script>
      const current = window.location.pathname;
      const twoParts = current.split('chapter-');
      var number = twoParts[1].replace('.html', '');
      function next() {
        if (number < 5) { alert(number); gotoChapter(++number); };
      }
      function previous() {
        if (number > 1) { gotoChapter(--number); }
      }
      function gotoChapter(n) {
          window.location = 'chapter-' + n + '.html';
      }
    </script>

You can also create the previous and next buttons using JS to exclude Next if the number is 5 or Previous if the number is 0.

Answer 2

Utilize the current URL to your advantage, as you are currently doing.

After obtaining the URL string, split it at the chapter- string. This will result in an array with two strings. The first element contains the full URL up to and including the / character before the chapter-, while the second element includes the number followed by .html. By removing .html from that element, you can extract the number.

To generate the URL when the user clicks the Next button, retrieve the number and if it's less than 5, increment it by 1. Create the desired (relative) URL by combining chapter- + the new n + .html. Then redirect to this URL using window location.

The process for the Previous button is similar, except the condition is that the number must be greater than 1 and then decrease it by 1.

<button type="button" onclick="previous();">Previous</button>
<button type="button" onclick="next();">Next</button>
    
    <script>
      const current = window.location.pathname;
      const twoParts = current.split('chapter-');
      var number = twoParts[1].replace('.html', '');
      function next() {
        if (number < 5) { alert(number); gotoChapter(++number); };
      }
      function previous() {
        if (number > 1) { gotoChapter(--number); }
      }
      function gotoChapter(n) {
          window.location = 'chapter-' + n + '.html';
      }
    </script>

You can also create the previous and next buttons using JS to exclude Next if the number is 5 or Previous if the number is 0.

Answer 3

Answer №2

To implement this functionality, you can utilize the dataset attribute in your HTML code. Simply include each page within your HTML as a dataset, then access this dataset using JavaScript to retrieve the corresponding page when a event is clicked. Subsequently, you can update your current variable by appending the value of the a tags' dataset that has been clicked.

const $li = $('li a')
$li.each(function(index, a){
  const current = window.location.pathname;
  function getURL(event) {
    event.preventDefault();
    alert(current + a.dataset.page);   
  }  
  a.addEventListener('click', getURL);  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a data-page="1" href="/chapter-1.html">Ch. 1 - TitleHere</a></li>
<li><a data-page="2" href="/chapter-2.html">Ch. 2 - TitleHere</a></li>
<li><a data-page="3" href="/chapter-3.html">Ch. 3 - TitleHere</a></li>
<li><a data-page="4" href="/chapter-4.html">Ch. 4 - TitleHere</a></li>
<li><a data-page="5" href="/chapter-5.html">Ch. 5 - TitleHere</a></li>

Answer 4

To implement this functionality, you can utilize the dataset attribute in your HTML code. Simply include each page within your HTML as a dataset, then access this dataset using JavaScript to retrieve the corresponding page when a event is clicked. Subsequently, you can update your current variable by appending the value of the a tags' dataset that has been clicked.

const $li = $('li a')
$li.each(function(index, a){
  const current = window.location.pathname;
  function getURL(event) {
    event.preventDefault();
    alert(current + a.dataset.page);   
  }  
  a.addEventListener('click', getURL);  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a data-page="1" href="/chapter-1.html">Ch. 1 - TitleHere</a></li>
<li><a data-page="2" href="/chapter-2.html">Ch. 2 - TitleHere</a></li>
<li><a data-page="3" href="/chapter-3.html">Ch. 3 - TitleHere</a></li>
<li><a data-page="4" href="/chapter-4.html">Ch. 4 - TitleHere</a></li>
<li><a data-page="5" href="/chapter-5.html">Ch. 5 - TitleHere</a></li>

Answer 5

Answer №3

Typically, the common method involves utilizing page IDs on the server side. However, there is an alternative approach that can be implemented:

<button onclick="getURL()"></button>
<script>
// Extract the page number from "/chapter-ThisIsYourPageNumber.html", found between "-" and "."
var current = window.location.pathname;
var start = current.indexOf("-") + 1; //+1 to get the starting index of the page number
var end = current.indexOf(".");
var length = end - start;
var pageNumber = current.substr(start, length);
var nextPageNumber = parseInt(pageNumber) + 1;

function getURL() {
    alert("/chapter-"+nextPageNumber+".html");
}
</script>

Answer 6

Typically, the common method involves utilizing page IDs on the server side. However, there is an alternative approach that can be implemented:

<button onclick="getURL()"></button>
<script>
// Extract the page number from "/chapter-ThisIsYourPageNumber.html", found between "-" and "."
var current = window.location.pathname;
var start = current.indexOf("-") + 1; //+1 to get the starting index of the page number
var end = current.indexOf(".");
var length = end - start;
var pageNumber = current.substr(start, length);
var nextPageNumber = parseInt(pageNumber) + 1;

function getURL() {
    alert("/chapter-"+nextPageNumber+".html");
}
</script>

What is the best way in JavaScript to target a specific element in a href attribute in order to create Previous and

Answer №1

Answer №2

Answer №3

Similar questions

How to incorporate C-style includes in the Firebug or Chrome console?

utilizing the entire string rather than just a portion

Conceal the information within a table using angular js and HTML

Vertical stacking of Bootstrap cards is a common design practice

The efficiency of XSL Template is significantly impacting loading time

Unable to reference C# class within Javascript file in Unity

Using HTML and JavaScript to automatically update one input date based on changes made to another

The issue encountered while attempting to utilize jspdf for exporting data

A bar graph fails to display on d3 visualization

The text input is malfunctioning in the IE web browser

Merge the properties of two class instances deeply

Encountering problem with JSON transmission to Controller Action

Acquire user input using AngularJS

Identifying absence of search results in jQuery UI auto-complete feature

load a particular section of another website into my own div

Scaling the ion-spinner to fit your specific needs

Integrating information from an API into the Document Object Model

Apply a tint to the specified section

A step-by-step guide on inserting a distinct identifier into a class using JavaScript/jQuery

Is it possible to delegate jQuery to itself?