在Javascript中创建复制按钮_Javascript_Html

在Javascript中创建复制按钮

javascript html

在Javascript中创建复制按钮,javascript,html,Javascript,Html,嘿，我是新的网络开发人员，我一直在做一个项目。我在一个报价网站上工作。首先，您访问我的代码笔并访问我的项目请访问我的CodePen网站，然后回答，否则您无法理解问题，或者我已经在底部写了我的项目。正如你在我的笔中看到的，每个报价下都有许多复制按钮，但它们不起作用。虽然我已经尝试了很多Javascript，但我知道它们都是有效的请记住，引号的、和Copy元素不是html格式的，因为它们是由Javascript创建的。只需仔细查看javascript 作为参考，我会给我的Javascript

嘿，我是新的网络开发人员，我一直在做一个项目。我在一个报价网站上工作。首先，您访问我的代码笔并访问我的项目

请访问我的CodePen网站，然后回答，否则您无法理解问题，或者我已经在底部写了我的项目。

正如你在我的笔中看到的，每个报价下都有许多复制按钮，但它们不起作用。虽然我已经尝试了很多Javascript，但我知道它们都是有效的

请记住，引号的

、

和

Copy

元素不是html格式的，因为它们是由Javascript创建的。只需仔细查看javascript

作为参考，我会给我的Javascript，我尝试了，但它不工作

Javascript（不工作）

我会再次告诉我的问题，我需要使用“复制”按钮，以便在单击相应按钮时可以复制相应的报价。请访问我的钢笔以清楚地理解它，或查看下面的内容。

参考我的代码笔项目

<html>
<head>
<style>
/* Main Status */
.mainStatus{
 background-color: #fff;
 border-radius: 10px;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
 padding-bottom: 5px;
 margin: 10px;
 margin-top: 10px;
 max-width: 95%;
 width: 95%;
 height: auto;
 border-radius: 20px;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.statusHeading{
 text-align: center;
 background-color: #18b495;
 color: #ffffff;
 padding: 10px 10px 10px 10px;
 border-top-right-radius: 20px;
 border-top-left-radius: 20px;
 font-weight: 300;
 font-size: 20px;
}
.latestatus{
 display: grid;
 height: auto;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
 padding: 10px 20px 10px 20px;
 border-radius: 30px;
 margin: 10px 10px 10px 10px;
 width: 445px;
 min-height: 130px;
 font-size: 15px;
}
.allStatus{
 display: flex;
}
.latestatus p{
 width: auto;
 position: relative;
}
.copystatus{
 font-weight: 500;
 text-transform: uppercase;
 width: 100px;
 height: 40px;
}
.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;
}
</style>
</head>
<body>
  <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-first">&#x226A;</button>
    <button class="page-btn-prev">&#60;</button>
    <input type="number" name="page-curr" min="1" value="1" />
    <button class="page-btn-next">&#62;</button>
    <button class="page-btn-last">&#x226B;</button>
    <select name="page-size">
      <option>5</option>
      <option>10</option>
      <option>20</option>
    </select>
  </div>
  <label>(<span class="result-count"></span> items)</label>
</div>
<script>
const resultEl = document.querySelector('.allquotes');
const pageSize = document.querySelector('select[name="page-size"]');
const pageCurr = document.querySelector('input[name="page-curr"]')
const resultCount = document.querySelector('.result-count')
const pageNoCurr = document.querySelector('.page-no-curr');
const pageNoCount = document.querySelector('.page-no-count')
const btnFirst = document.querySelector('.page-btn-first');
const btnPrev = document.querySelector('.page-btn-prev');
const btnNext = document.querySelector('.page-btn-next');
const btnLast = document.querySelector('.page-btn-last');

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() => {
  btnFirst.addEventListener('click', navFirst);
  btnPrev.addEventListener('click', navPrev);
  btnNext.addEventListener('click', navNext);
  btnLast.addEventListener('click', navLast);
  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.innerHTML = paged.map(record => `<div class='latestatus'><p class='copytxt'>${record.quotes}</p><div> <button class="copystatus btn">Copy</button></div></div>`).join('');
  resultEl.append(contents);
};

const navFirst = (e) => {
  pageNoCurr.textContent = 1;
  pageCurr.value = 1;
  redraw();
}

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 navLast = (e) => {
  pageNoCurr.textContent = getPageCount();
  pageCurr.value = getPageCount();
  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;
  resultCount.textContent = getResultCount();
};

const retrieveAllQuotes = async function() {

  // write your asynchronous fetching here

  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."
    },
]; 
}
main();
</script>
</body>
</html>


/*主要地位*/
中流砥柱{
背景色：#fff；
边界半径：10px；
盒影：0 3px 10px rgba（0,0,0,0.2）；
垫底：5px；
利润率：10px；
边缘顶部：10px；
最大宽度：95%；
宽度：95%；
高度：自动；
边界半径：20px；
盒影：0 3px 10px rgba（0,0,0,0.2）；
}
.状态标题{
文本对齐：居中；
背景色：#18b495；
颜色：#ffffff；
填充：10px 10px 10px 10px；
边框右上角半径：20px；
边框左上半径：20px；
字体大小：300；
字体大小：20px；
}
.迟到{
显示：网格；
高度：自动；
盒影：0 3px 10px rgba（0,0,0,0.2）；
填充：10px 20px 10px 20px；
边界半径：30px；
保证金：10px 10px 10px 10px；
宽度：445px；
最小高度：130px；
字体大小：15px；
}
.所有状态{
显示器：flex；
}
.迟到{
宽度：自动；
位置：相对位置；
}
.版权状况{
字号：500；
文本转换：大写；
宽度：100px；
高度：40px；
}
.可分页{
显示器：flex；
弯曲方向：立柱；
边框：var（--可分页边框）；
背景：var（--可分页背景）；
}
.可分页。可分页结果{
显示器：flex；
弯曲方向：立柱；
弹性：1；
填充：0.25em；
}
.可分页。可分页状态{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
填充：0.25em；
背景：var（--可分页状态背景）；
}
.可分页。可分页操作{
显示：网格；
网格自动流：列；
网格间距：0.25em；
}
.pagable.pagable操作输入[name=“page curr”]{
宽度：3em；
}
最新英语状况
第1页，共1页
≪；
<
>
≫；
5.
10
20
（项目）
const resultEl=document.querySelector（'.allquotes'）；
const pageSize=document.querySelector（'select[name=“page size”]”）；
const pageCurr=document.querySelector（'input[name=“page curr”]”）
const resultCount=document.querySelector（“.result count”）
const pageNoCurr=document.querySelector（“.page no curr”）；
const pageNoCount=document.querySelector（“.page no count”）
const btnFirst=document.querySelector（“.page btn first”）；
const btnPrev=document.querySelector（'.page btn prev'）；
const btnNext=document.querySelector（“.page btn next”）；
const btnLast=document.querySelector（'.page btn last'）；
让结果=[]；
const getResultCount=（）=>results.length；
const getPageSize=（）=>+pageSize.value；
const getCurrPage=（）=>+pageCurr.value；
const getPageCount=（）=>Math.ceil（getResultCount（）/getPageSize（））；
常量页面响应=（记录、页面大小、页面）=>
（start=>records.slice（start，Math.min（records.length，start+pageSize）））
（页面大小*（第1页））；
常量main=async（）=>{
btnFirst.addEventListener（'click'，navFirst）；
btnPrev.addEventListener（'click'，navPrev）；
btnNext.addEventListener（'click'，navNext）；
btnLast.addEventListener（'click'，navLast）；
pageSize.addEventListener（'change'，changeCount）；
结果=等待检索AllQuotes（）；
更新程序（结果）；
重画（）；
};
常数重绘=（）=>{
resultEl.innerHTML=''；
const paged=pageResponse（结果，getPageSize（），getCurrPage（））；
const contents=document.createElement（'div'）；
contents.innerHTML=paged.map（record=>`${record.quotes}Copy`）.join（“”）；
结果追加（内容）；
};
const navFirst=（e）=>{
pageNoCurr.textContent=1；
pageCurr.value=1；
重画（）；
}
const navPrev=（e）=>{
const pages=getPageCount（）；
const curr=getCurrPage（）；
const prevPage=curr>1？curr-1：curr；
pageCurr.value=上一页；
pageNoCurr.textContent=prevPage；
重画（）；
}
const navNext=（e）=>{
const pages=getPageCount（）；
const curr=getCurrPage（）；
const nextPage=curr{
pageNoCurr.textContent=getPageCount（）；
pageCurr.value=getPageCount（）；
重画（）；
}
常量更改计数=（）=>{
updatePage（）；
重画（）；
};
常量updatePage=（）=>{
const count=getPageCount（）；
const curr=getCurrPage（）；
pageCurr.value=curr>count？1：curr；
pageNoCurr.textContent=curr>count？1：curr；
pageNoCount.textContent=计数；
resultCount.textContent=getResultCount（）；
};
const retrieveAllQuotes=异步函数（）{
//在这里编写异步抓取
返回[{
引语：“猫胜于狗。”
},
{
引用：“2Google是一个开源库。”
},
{
引语：“3只猫比雪貂好。”
},
{
引语：“爱的书。”
},
{
格言：“生命短暂，让它成为可能。”
},
{
引语：“6猫胜于狗”
},
{
引用：“7Google是一个开源库。”
},
{
格言：“猫比雪貂好。”
},
{
引语：“爱的书。”
},
{
格言：“生命是短暂的，让它成为可能。”
},
]; 
}
M
<html>
<head>
<style>
/* Main Status */
.mainStatus{
 background-color: #fff;
 border-radius: 10px;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
 padding-bottom: 5px;
 margin: 10px;
 margin-top: 10px;
 max-width: 95%;
 width: 95%;
 height: auto;
 border-radius: 20px;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.statusHeading{
 text-align: center;
 background-color: #18b495;
 color: #ffffff;
 padding: 10px 10px 10px 10px;
 border-top-right-radius: 20px;
 border-top-left-radius: 20px;
 font-weight: 300;
 font-size: 20px;
}
.latestatus{
 display: grid;
 height: auto;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
 padding: 10px 20px 10px 20px;
 border-radius: 30px;
 margin: 10px 10px 10px 10px;
 width: 445px;
 min-height: 130px;
 font-size: 15px;
}
.allStatus{
 display: flex;
}
.latestatus p{
 width: auto;
 position: relative;
}
.copystatus{
 font-weight: 500;
 text-transform: uppercase;
 width: 100px;
 height: 40px;
}
.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;
}
</style>
</head>
<body>
  <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-first">&#x226A;</button>
    <button class="page-btn-prev">&#60;</button>
    <input type="number" name="page-curr" min="1" value="1" />
    <button class="page-btn-next">&#62;</button>
    <button class="page-btn-last">&#x226B;</button>
    <select name="page-size">
      <option>5</option>
      <option>10</option>
      <option>20</option>
    </select>
  </div>
  <label>(<span class="result-count"></span> items)</label>
</div>
<script>
const resultEl = document.querySelector('.allquotes');
const pageSize = document.querySelector('select[name="page-size"]');
const pageCurr = document.querySelector('input[name="page-curr"]')
const resultCount = document.querySelector('.result-count')
const pageNoCurr = document.querySelector('.page-no-curr');
const pageNoCount = document.querySelector('.page-no-count')
const btnFirst = document.querySelector('.page-btn-first');
const btnPrev = document.querySelector('.page-btn-prev');
const btnNext = document.querySelector('.page-btn-next');
const btnLast = document.querySelector('.page-btn-last');

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() => {
  btnFirst.addEventListener('click', navFirst);
  btnPrev.addEventListener('click', navPrev);
  btnNext.addEventListener('click', navNext);
  btnLast.addEventListener('click', navLast);
  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.innerHTML = paged.map(record => `<div class='latestatus'><p class='copytxt'>${record.quotes}</p><div> <button class="copystatus btn">Copy</button></div></div>`).join('');
  resultEl.append(contents);
};

const navFirst = (e) => {
  pageNoCurr.textContent = 1;
  pageCurr.value = 1;
  redraw();
}

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 navLast = (e) => {
  pageNoCurr.textContent = getPageCount();
  pageCurr.value = getPageCount();
  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;
  resultCount.textContent = getResultCount();
};

const retrieveAllQuotes = async function() {

  // write your asynchronous fetching here

  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."
    },
]; 
}
main();
</script>
</body>
</html>

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 textArea = document.createElement('textarea');
        textArea.value = quote;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('Copy');
        textArea.remove();
    }
  },
  false
);

contents.innerHTML = paged.map(record => `<div class='latestatus'><p class='copytxt'>${record.quotes}</p><div> <button class="copystatus btn" >Copy</button></div></div>`).join('');

contents.innerHTML = paged.map(record => `<div class='latestatus'><p class='copytxt'>${record.quotes}</p><div> <button class="copystatus btn" onclick='copyTextToClipboard("${record.quotes}")'>Copy</button></div></div>`).join('');