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 main = async() => {
btnPrev.addEventListener('click', navPrev);
btnNext.addEventListener('click', navNext);
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>Copied!</div></div>`);
const quoteGroupNumer = Math.ceil(quotes.length / 2);
const groups = Array(quoteGroupNumer).fill('').map((value, index) => {
const groupQuoteFirst = quotes[2 * index];
const groupQuoteSecond = quotes[2 * index + 1] || '';
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 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() {
const response = await fetch(window.__api__);
const data = await response.json();
return data;
}
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>
.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 1 of 1</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>20</option>
<option>10</option>
<option>20</option>
</select>
</div>
<input />
<button>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
What I have tried:
I am new to Javascript and I don't know about this bur I have consulted many friends but none of them got.
Submit an article or tip