'how to increment the url onclick of button next

I have url for page 1 as http://www.dev-crn.com:5703/tag/Cloud on click of button next i need the url updated for page 2 as http://www.dev-crn.com:5703/tag/Cloud/1 how can i do that in javascript ot jquery? i have a parameter declared as var pagenumber already and var urlPath = window.location.pathname; where the link is fetched. how to make it dynamic way of incrementing the url?

Pagenumber is total pages present in my case i have 8 pages so each time onclick of next button i need to increment the url upto 8 pages

javascripthtmljquery


Solution 1:[1]

window.location = `${window.location.host}/tag/Cloud/${pagenumber}`;

Solution 2:[2]

Can you please try this:

You will be having these three buttons for all of your pages.

Just change the value of the middle button for each page.

Hope I understood your requirements.

$('.change_page').click(function() {
  var this_page = $('#this_page').html();
  var new_location = '';
  var this_location = window.location.href;
  var this_action = $(this).attr('id');
  if (this_action == 'previous' && this_page != '1') {
    var page_number = parseInt(this_page) - 1;
    new_location = this_location + '/' + page_number;
  }
  if (this_action == 'next' && this_page != '8') {
    var page_number = parseInt(this_page) + 1;
    new_location = this_location + '/' + page_number;
  }
  console.log(new_location);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This page is currently on page number 4<br/>
<button id="previous" class="change_page">previous</button>
<button id="this_page">4</button>
<button id="next" class="change_page">next</button>

Solution 3:[3]

You cannot "increase" a URL but you can increase numbers and use them to build up your URLs.

const BASE_URL = "https://example.com";
const MAX_POSITIONS = 8;
const BTN_NEXT = document.getElementById("btn-next");
const BTN_PREV = document.getElementById("btn-prev");
const URL_VALUE = document.getElementById("url-value");
const _createUrl = function(position) {
  if (position > 0) {
    return BASE_URL + "/" + position;
  }

  return BASE_URL;
};
let currentPosition = 0;
BTN_NEXT.addEventListener("click", function() {
  if (currentPosition === MAX_POSITIONS - 1) {
    return;
  }
  currentPosition++;
  URL_VALUE.textContent = _createUrl(currentPosition);
});
BTN_PREV.addEventListener("click", function() {
  if (currentPosition === 0) {
    return;
  }
  currentPosition--;
  URL_VALUE.textContent = _createUrl(currentPosition);
});
<button id="btn-next">Next</button>
<button id="btn-prev">Prev</button>
<div>
  <h4>URL</h4>
  <span id="url-value"></span>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Duc Nguyen
Solution 2 Parth Raval
Solution 3 Parth Raval

Related Questions