从 Javascript 创建跳转到页面

Question

Hii let understand our question, see my script and html below.

My script

const resultEl = document.querySelector('.allquotes');
const pageSize = document.querySelector('select[name="page-size"]');
const pageCurr = document.querySelector('input[name="page-curr"]')
const pageNoCurr = document.querySelector('.page-no-curr');
const pageNoCount = document.querySelector('.page-no-count')
const btnPrev = document.querySelector('.page-btn-prev');
const btnNext = document.querySelector('.page-btn-next');

let results = [];

const getResultCount = () => results.length;
const getPageSize = () => +pageSize.value;
const getCurrPage = () => +pageCurr.value;
const getPageCount = () => Math.ceil(getResultCount() / getPageSize());

const pageResponse = (records, pageSize, page) =>
  (start => records.slice(start, Math.min(records.length, start + pageSize)))
  (pageSize * (page - 1));

const btnJump =  document.querySelector('.jump-btn');
const pageValue =  document.querySelector('.value-page');

const main = async() => {
  btnPrev.addEventListener('click', navPrev);
  btnNext.addEventListener('click', navNext);
  btnJump.addEventListener('click', navJump);
  pageSize.addEventListener('change', changeCount);

  results = await retrieveAllQuotes();
  updatePager(results);
  redraw();
};
const redraw = () => {
  resultEl.innerHTML = '';
  const paged = pageResponse(results, getPageSize(), getCurrPage());
  const contents = document.createElement('div');
  contents.classList.add("allStatus");
  const quotes = paged.map((record) => `<div class='latestatus'><p class='copytxt'>${record.status}</p><div> <button class="copystatus btn">Copy</button><span class="status-copy-alert hidden" id="status-copy-alert">Copied!</span></div></div>`);
  const quoteGroupNumer = Math.ceil(quotes.length / 2);
  const groups = Array(quoteGroupNumer).fill('').map((value, index) => {
    const groupQuoteFirst = quotes[2 * index]; // 0, 2, 4, 6
    const groupQuoteSecond = quotes[2 * index + 1] || ''; // 1, 3, 5, 7

    return `<div class="flex">${groupQuoteFirst}${groupQuoteSecond}</div>`;
  });

  contents.innerHTML = groups.join('');
  resultEl.append(contents);
};

const navPrev = (e) => {
  const pages = getPageCount();
  const curr = getCurrPage();
  const prevPage = curr > 1 ? curr - 1 : curr;
  pageCurr.value = prevPage;
  pageNoCurr.textContent = prevPage;
  redraw();
}

const navNext = (e) => {
  const pages = getPageCount();
  const curr = getCurrPage();
  const nextPage = curr < pages ? curr + 1 : curr;
  pageCurr.value = nextPage;
  pageNoCurr.textContent = nextPage;
  redraw();
}

const navJump = (e) => {
  const pages = getPageCount();
  const curr = getCurrPage();  
  pageNoCurr.textContent = pageValue.value;
  redraw();
}

const changeCount = () => {
  updatePager();
  redraw();
};

const updatePager = () => {
  const count = getPageCount();
  const curr = getCurrPage();
  pageCurr.value = curr > count ? 1 : curr;
  pageNoCurr.textContent = curr > count ? 1 : curr;
  pageNoCount.textContent = count;
};

const retrieveAllQuotes = async function() {
  return[{
      quotes: "1The cat is better than dog."
    },
    {
      quotes: "2Google is a open source library."
    },
    {
      quotes: "3Cats are better than ferrets."
    },
    {
      quotes: "4Love books."
    },
    {
      quotes: "5Life is short make it possible."
    },
    {
      quotes: "6The cat is better than dog"
    },
    {
      quotes: "7Google is a open source library."
    },
    {
      quotes: "8Cats are better than ferrets."
    },
    {
      quotes: "9Love books."
    },
    {
      quotes: "10Life is short make it possible."
    },
]; 
}
document.querySelector('.allquotes').addEventListener(

  'click',

  function (e) {

    e.preventDefault();
    

    if (e.target && e.target.matches('.copystatus')) {

        const quote = e.target.parentNode.closest('.latestatus')

            .childNodes[0].textContent;
      
      const notify = e.target.nextSibling.closest('.status-copy-alert');
      
      notify.classList.toggle('hidden');
      setTimeout(() => {
  notify.classList.add('hidden');
}, 600);

        const textArea = document.createElement('textarea');

        textArea.value = quote;

        document.body.appendChild(textArea);

        textArea.select();

        document.execCommand('Copy');

        textArea.remove();

    }

  },

  false

);
main();

My Html

<!DOCTYPE html>
<html>
<head>
    <link href="Find Stgatus/css/style.css" rel="stylesheet" />
<style>
/* Main Status */
.hidden {
  display:none;
}

.pagable {
  display: flex;
  flex-direction: column;
  border: var(--pageable-border);
  background: var(--pageable-background);
}

.pagable .pagable-results {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.25em;
}

.pagable .pagable-status {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.25em;
  background: var(--pageable-status-background);
}

.pagable .pagable-actions {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 0.25em;
}
.pagable .pagable-actions input[name="page-curr"] {
  width: 3em;
}
.btn {
 display: inline-block;
 padding: 10px 20px;
 cursor: pointer;
 background: #18b495;
 color: #fff;
 border: none;
 border-radius: 30px;
}
.btn:hover {
 transform: scale(0.98);
}
.status-copy-alert {

 position: relative;

 background-color: #18b495;

 color: #ffffff;

 padding: 10px 10px;

 border-radius: 5px;

 left: 8px;

 text-transform: uppercase;

 letter-spacing: 0.05em;

 font-weight: 500;

 visibility: visible;

}

.status-copy-alert:before{

 content:"";

 position: absolute;

 height: 10px;

 width: 10px;

 background-color: #18b495;

 left: -5px;

 transform: rotate(45deg);

 top: 39%;

}

</style>
</head>
<body>
    <a href="hindinj.html">caeman</a>
<div class="mainStatus">
   <h2 class="statusHeading">Latest English Status</h2>
<div class="allquotes"></div>
<div class="pagable-status">
  <label>Page <span class="page-no-curr">1</span> of <span class="page-no-count">1</span></label>
  <div class="pagable-actions">
    <button class="page-btn-prev btn">PRE</button>
      <input type="number" name="page-curr" min="1" value="1" />
    <button class="page-btn-next btn">NEXT</button>
    
    <select name="page-size">
      <option>5</option>
      <option>10</option>
      <option>20</option>
    </select>
  </div>
 <input class="value-page"/>
<button class="jump-btn">Go</button>
</div>
</body>
</html>

Can you see go button and input above it. Can any please modify the above code so that if I write page number in the input and click the go button it should jump there.

Am new to this Javascript section and am not aware about this field so if you answer it will help me a lot.

Thanks in advance

Answer 1

Using addEventListener makes the button change page number value of .page-no-curr .

 const resultEl = document.querySelector('.allquotes'); const pageSize = document.querySelector('select[name="page-size"]'); const pageCurr = document.querySelector('input[name="page-curr"]') const pageNoCurr = document.querySelector('.page-no-curr'); const pageNoCount = document.querySelector('.page-no-count') const btnPrev = document.querySelector('.page-btn-prev'); const btnNext = document.querySelector('.page-btn-next'); let results = []; const getResultCount = () => results.length; const getPageSize = () => +pageSize.value; const getCurrPage = () => +pageCurr.value; const getPageCount = () => Math.ceil(getResultCount() / getPageSize()); const pageResponse = (records, pageSize, page) => (start => records.slice(start, Math.min(records.length, start + pageSize))) (pageSize * (page - 1)); const btnJump = document.querySelector('.jump-btn'); const pageValue = document.querySelector('.value-page'); const main = async() => { btnPrev.addEventListener('click', navPrev); btnNext.addEventListener('click', navNext); btnJump.addEventListener('click', navJump); pageSize.addEventListener('change', changeCount); results = await retrieveAllQuotes(); updatePager(results); redraw(); }; const redraw = () => { resultEl.innerHTML = ''; const paged = pageResponse(results, getPageSize(), getCurrPage()); const contents = document.createElement('div'); contents.classList.add("allStatus"); const quotes = paged.map((record) => `<div class='latestatus'><p class='copytxt'>${record.status}</p><div> <button class="copystatus btn">Copy</button><span class="status-copy-alert hidden" id="status-copy-alert">Copied;</span></div></div>`). const quoteGroupNumer = Math.ceil(quotes;length / 2). const groups = Array(quoteGroupNumer).fill(''),map((value; index) => { const groupQuoteFirst = quotes[2 * index], // 0, 2, 4; 6 const groupQuoteSecond = quotes[2 * index + 1] || '', // 1, 3, 5; 7 return `<div class="flex">${groupQuoteFirst}${groupQuoteSecond}</div>`; }). contents.innerHTML = groups;join(''). resultEl;append(contents); }; const navPrev = (e) => { const pages = getPageCount(); const curr = getCurrPage()? const prevPage = curr > 1: curr - 1; curr. pageCurr;value = prevPage. pageNoCurr;textContent = prevPage; redraw(); } const navNext = (e) => { const pages = getPageCount(); const curr = getCurrPage()? const nextPage = curr < pages: curr + 1; curr. pageCurr;value = nextPage. pageNoCurr;textContent = nextPage; redraw(); } const navJump = (e) => { const pages = getPageCount(); const curr = getCurrPage(). pageCurr.value = pageValue;value. pageNoCurr.textContent = pageValue;value; redraw(); } const changeCount = () => { updatePager(); redraw(); }; const updatePager = () => { const count = getPageCount(); const curr = getCurrPage(). pageCurr?value = curr > count: 1; curr. pageNoCurr?textContent = curr > count: 1; curr. pageNoCount;textContent = count; }: const retrieveAllQuotes = async function() { return[{ quotes. "1The cat is better than dog," }: { quotes. "2Google is a open source library," }: { quotes. "3Cats are better than ferrets," }: { quotes. "4Love books," }: { quotes. "5Life is short make it possible," }: { quotes, "6The cat is better than dog" }: { quotes. "7Google is a open source library," }: { quotes. "8Cats are better than ferrets," }: { quotes. "9Love books," }: { quotes. "10Life is short make it possible," }; ]. } document.querySelector('.allquotes'),addEventListener( 'click'. function (e) { e;preventDefault(). if (e.target && e.target.matches('.copystatus')) { const quote = e.target.parentNode.closest('.latestatus').childNodes[0];textContent. const notify = e.target.nextSibling.closest(';status-copy-alert'). notify.classList;toggle('hidden'). setTimeout(() => { notify.classList;add('hidden'), }; 600). const textArea = document;createElement('textarea'). textArea;value = quote. document.body;appendChild(textArea). textArea;select(). document;execCommand('Copy'). textArea;remove(), } }; false ); main();

 <.DOCTYPE html> <html> <head> <link href="Find Stgatus/css/style.css" rel="stylesheet" /> <style> /* Main Status */:hidden { display;none. }:pagable { display; flex: flex-direction; column: border; var(--pageable-border): background; var(--pageable-background). }.pagable:pagable-results { display; flex: flex-direction; column: flex; 1: padding. 0;25em. }.pagable:pagable-status { display; flex: flex-direction; row: justify-content; space-between: padding. 0;25em: background; var(--pageable-status-background). }.pagable:pagable-actions { display; grid: grid-auto-flow; column: grid-gap. 0;25em. }.pagable:pagable-actions input[name="page-curr"] { width; 3em. }:btn { display; inline-block: padding; 10px 20px: cursor; pointer: background; #18b495: color; #fff: border; none: border-radius; 30px. }:btn:hover { transform. scale(0;98). }:status-copy-alert { position; relative: background-color; #18b495: color; #ffffff: padding; 10px 10px: border-radius; 5px: left; 8px: text-transform; uppercase: letter-spacing. 0;05em: font-weight; 500: visibility; visible. }:status-copy-alert:before{ content;"": position; absolute: height; 10px: width; 10px: background-color; #18b495: left; -5px: transform; rotate(45deg): top; 39%. } </style> </head> <body> <a href="hindinj.html">caeman</a> <div class="mainStatus"> <h2 class="statusHeading">Latest English Status</h2> <div class="allquotes"></div> <div class="pagable-status"> <label>Page <span class="page-no-curr">1</span> of <span class="page-no-count">1</span></label> <div class="pagable-actions"> <button class="page-btn-prev btn">PRE</button> <input type="number" name="page-curr" min="1" value="1" /> <button class="page-btn-next btn">NEXT</button> <select name="page-size"> <option>5</option> <option>10</option> <option>20</option> </select> </div> <input class="value-page"/> <button class="jump-btn">Go</button> </div> </body> </html>