I am trying to change the button that is clicked to 'COPIED!'. However, only the 1st button works. The other buttons don't change to 'COPIED!' after clicking.
The issue lies in the last part of the code. However, I can't seem to get around it.
Any help is appreciated.
Code:
<pre><div id="test"></div>
const alphabet1 = ["Λ", "B", "C", "D", "E"];
let txt2 = "ΛΛ";
let final = "";
for (let i = 0; i < alphabet1.length; i++) {
for (let j = 0; j < alphabet1.length; j++) {
for (let k = 0; k < alphabet1.length; k++) {
final += "<button onclick=\"copy(this)\"><span id=\"copied\">" + alphabet1[i] + txt2 + alphabet1[j] + alphabet1[k] + "</span></button>";
}
}
}
document.getElementById("test").innerHTML = final;
function copy(that) {
var inp = document.createElement("input");
document.body.appendChild(inp)
inp.value = that.textContent
inp.select();
document.execCommand("copy", false);
inp.remove();
}
document.getElementById("copied").addEventListener("click", function(clicked) {
return function() {
if (!clicked) {
var last = this.innerHTML;
this.innerHTML = "COPIED!";
clicked = true;
setTimeout(function() {
this.innerHTML = last;
clicked = false;
}.bind(this), 1000);
}
};
}(false), this);
What I have tried:
document.getElementById("copied").addEventListener("click", function (clicked) {
return function () {
if (!clicked) {
var last = this.innerHTML;
this.innerHTML = "COPIED!";
clicked = true;
setTimeout(function () {
this.innerHTML = last;
clicked = false;
}.bind(this), 1000);
}
};
}(false), this);