I have two paragraphs of text, each has a “copy to clipboard” button, and each button has its own script. How can I combine these two button scripts into one?
HTML:
<p id="text1">Copy to clipboard 1</p>
<p id="text2">Copy to clipboard 2</p>
<div class="tooltip">
<button onclick="myFunction()" onmouseout="outFunc()">
<span class="tooltiptext" id="myBtn">Copy to clipboard</span>
Copy text
</button>
</div>
<div class="tooltip">
<button onclick="myFunction_1()" onmouseout="outFunc()">
<span class="tooltiptext" id="myBtn-1">Copy to clipboard</span>
Copy text
</button>
</div>
and JS:
<script>
function myFunction() {
navigator.clipboard.writeText(document.querySelector("#text1").innerText);
var tooltip = document.getElementById("myBtn");
tooltip.innerHTML = "Copied";
}
function outFunc() {
var tooltip = document.getElementById("myBtn");
tooltip.innerHTML = "Copy to clipboard";
}
</script>
<script>
function myFunction_1() {
navigator.clipboard.writeText(document.querySelector("#text2").innerText);
var tooltip = document.getElementById("myBtn-1");
tooltip.innerHTML = "Copied";
}
function outFunc() {
var tooltip = document.getElementById("myBtn-1");
tooltip.innerHTML = "Copy to clipboard";
}
</script>