如何使复制按钮对多个按钮发出警报？

如何解决如何使复制按钮对多个按钮发出警报？

您好，我是 javascript 新手，但我尽我所能编写了一个 javascript 来复制 <p></p> 元素中的文本。 我的 JavaScript

function copyToClipboard(var1){
    let val = document.getElementById(var1).innerHTML;
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }  

但是在复制文本时我需要一个自定义警报按钮。 我的html

<div class="Engstatus">
   <h2 class="statusheading">Latest English Status</h2>
   <div id="englishstatus">
    <div class="latestatus">
     <p id="p1">life os good when hou have books</p> 
     <button class="copystatus btn" onclick="copyToClipboard('p1')">copy</button>
       <span class="copystatusalert">copied!</span>
    </div>
    <div class="latestatus">
     <p id="p2">Google is a open source library. It is a open source by lary page and sergy brime</p>
     <button class="copystatus btn" onclick="copyToClipboard('p2')">copy</button>
       <span class="copystatusalert">copied!</span>
    </div>
    <div class="latestatus">
     <p id="p3">Cat is better than dog</p>
     <button class="copystatus btn" onclick="copyToClipboard('p3')">copy</button>
       <span class="copystatusalert">copied!</span>
    </div>
   </div>
  </div>

我需要 <span class="copystatusalert">copied!</span> 在点击相应的复制按钮时显示几秒钟并消失。 更多参考我的Css

.copystatusalert{
  position: relative;
  background-color: var(--primary-color);
  color: #ffffff;
  margin-left: 10px;
  padding: 3px 3px;
  border-radius: 5px;
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s,margin-top 0.4s;
}
.copystatusalert:before{
  content:"";
  position: absolute;
  height: 10px;
  width: 10px;
  background-color: var(--primary-color);
  left: -5px;
  transform: translateY(50%) rotate(45deg);
  z-index: -1;
  top: 17%;
}

解决方法

这里是对 copyToClipboard 函数的简短补充，以便更改 .copystatusalert 颜色...

function copyToClipboard(var1) {
  let val = document.getElementById(var1).innerHTML;
  const selBox = document.createElement('textarea');
  selBox.style.position = 'fixed';
  selBox.style.left = '0';
  selBox.style.top = '0';
  selBox.style.opacity = '0';
  selBox.value = val;
  document.body.appendChild(selBox);
  selBox.focus();
  selBox.select();
  document.execCommand('copy');
  document.body.removeChild(selBox);
  
  // to change the color of .copystatusalert
  let copyStatus = document.getElementById(var1).closest(".latestatus").querySelector(".copystatusalert")
  copyStatus.style.color = "black";
  
  // Change the color again in 800 milliseconds
  setTimeout(function(){
    copyStatus.style.color = "white";
  },800)
}

.copystatusalert {
  position: relative;
  background-color: var(--primary-color);
  color: #ffffff;
  margin-left: 10px;
  padding: 3px 3px;
  border-radius: 5px;
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s,margin-top 0.4s;
}

.copystatusalert:before {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  background-color: var(--primary-color);
  left: -5px;
  transform: translateY(50%) rotate(45deg);
  z-index: -1;
  top: 17%;
}

<div class="Engstatus">
  <h2 class="statusheading">Latest English Status</h2>
  <div id="englishstatus">
    <div class="latestatus">
      <p id="p1">life os good when hou have books</p>
      <button class="copystatus btn" onclick="copyToClipboard('p1')">Copy</button>
      <span class="copystatusalert">Copied!</span>
    </div>
    <div class="latestatus">
      <p id="p2">Google is a open source library. It is a open source by lary page and sergy brime</p>
      <button class="copystatus btn" onclick="copyToClipboard('p2')">Copy</button>
      <span class="copystatusalert">Copied!</span>
    </div>
    <div class="latestatus">
      <p id="p3">Cat is better than dog</p>
      <button class="copystatus btn" onclick="copyToClipboard('p3')">Copy</button>
      <span class="copystatusalert">Copied!</span>
    </div>
  </div>
</div>

现在...由于您“JavaScript 新手”，我建议您仔细查看此解决方案。

目的是创建一个函数，该函数将应用于任意数量的 status 元素......并避免管理所有 <p> 的唯一 ID......并“减少”多余的 HTML 标记（按钮和警报跨度）。

请查看下面的评论以了解分步详细信息，并随时提出问题。 ;)

// The animation delay for the "copied" alert
let copyAlertAnimationDelay = 400; // ms

// Get all the status elements
let status = document.querySelectorAll(".status");

// For each status,add a button with its event listener
status.forEach(function(elem) {

  // Create the button
  let btn = document.createElement('button');
  btn.setAttribute("class","copystatus btn");
  btn.innerText = "Copy";

  // Append the button
  elem.after(btn);

  // Set the button event listener
  btn.addEventListener("click",function() {

    // Get the status
    let statusToCopy = elem.innerText;

    // Create the temporary textarea to copy the text
    const selBox = document.createElement('textarea');

    // Use a class instead of multiple element.style.property changes
    selBox.setAttribute("class","hiddenCopy");
    selBox.value = statusToCopy;

    // Append,copy and remove.
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    selBox.remove();

    // create a "Copied!" element.
    let alert = document.createElement("span");
    alert.innerText = "Copied!";
    alert.setAttribute("class","copystatusalert");

    // Use the copyAlertAnimationDelay variable to set the CSS transition
    // So it matches the setTimeout delay below
    alert.style.transition = `all ${copyAlertAnimationDelay/1000}s`;

    // The animation timeouts
    // Show
    this.after(alert);
    setTimeout(function() {
      alert.style.opacity = 1;
    },1)

    // Hide
    // Change opacity
    setTimeout(function() {
      alert.style.opacity = 0;
      // Remove element
      setTimeout(function() {
        document.querySelector(".copystatusalert").remove();
      },copyAlertAnimationDelay);
    },copyAlertAnimationDelay * 3) // 3 times the animation delay...
  });

});

body {
  --primary-color: #a7d8f2; /* ADDED */
}

.copystatusalert {
  position: relative;
  background-color: var(--primary-color);
  /*color: #ffffff; REMOVED */
  margin-left: 10px;
  padding: 3px 3px;
  border-radius: 5px;
  z-index: 2;
  opacity: 0;
  /* opacity was 1 */
  pointer-events: auto;
  /*transition: opacity 0.4s,margin-top 0.4s; REMOVED */
}

.copystatusalert:before {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  background-color: var(--primary-color);
  left: -5px;
  transform: translateY(50%) rotate(45deg);
  z-index: -1;
  top: 17%;
}

/* ADDED */
.hiddenCopy {
  position: "fixed";
  left: 0;
  top: 0;
  opacity: 0;
}

<div class="Engstatus">
  <h2 class="statusheading">Latest English Status</h2>
  <div id="englishstatus">
    <div class="latestatus">
      <p class="status">life os good when hou have books</p>
    </div>
    <div class="latestatus">
      <p class="status">Google is a open source library. It is a open source by lary page and sergy brime</p>
    </div>
    <div class="latestatus">
      <p class="status">Cat is better than dog</p>
    </div>
  </div>
</div>

,

Toast 用于显示这样的任务。 使用此代码

function myFunction() {
  var x = document.getElementById("message");
  x.className = "show";
  
  // you can set the time here// 
  setTimeout(function(){ x.className = x.className.replace("show",""); },3000);
}

body {
 font-family: 'Oswald',sans-serif;
}


#message {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#message.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s,fadeout 0.5s 2.5s;
  animation: fadein 0.5s,fadeout 0.5s 2.5s;
}


  /* The animation*/
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

<button onclick="myFunction()">Copy</button>

<!-- This is the toast message -->
<div id="message">Text is copied!!</div>