通过按钮将内容从 div 元素复制到剪贴板

Question

I am working on a simple program that takes input from user and performs arithmetic function on the input value and then displays result in div element via innerHTML. I have tried the ClipboardJS library with implementing data target in button to target div element content but it's not showing any result.

Can you help me, please?

 $(document).ready(function() { document.getElementById("idofdiv").style.display = "none"; document.getElementById("copybutton").style.display = "none"; $("#showbuttonid").click(function() { var a = $("input#inputvaluebox").val(); var b = a * 10; var b = "Value is" + b; document.getElementById("idofdiv").style.display = "block"; document.getElementById("copybutton").style.display = "block"; document.getElementById("idofdiv").innerHTML = b; }); });

 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap'); .labelclass { font-size: 20px; font-family: 'Open Sans', sans-serif; }.inputvaluecss { box-sizing: border-box; border: 1px solid #DDDDDD; outline: none; margin-left: 42px; margin-top: 16px; width: 275px; padding-top: 12px; padding-left: 15px; padding-bottom: 12px; }.inputvaluecss:focus { box-shadow: 0 0 5px #2EDC29; border: 1px solid #2EDC29; }.divclass { font-size: 20px; font-family: 'Open Sans', sans-serif; color: black; background-color: white; width: 700px; padding-left: 18px; padding-top: 13px; padding-bottom: 13px; padding-right: 18px; box-sizing: border-box; border: 1px solid #DDDDDD; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> <form> <br> <label for="inputvaluebox" class="labelclass">Input Value</label> <input type="text" id="inputvaluebox" name="inputvaluename" class="inputvaluecss"><br><br> <input type="reset" id="resetbuttonid"> <button type="button" id="showbuttonid">Show</button><br><br><br> <div id="idofdiv" class="divclass"></div><br> <button type="button" id="copybutton" data-clipboard-target="#idofdiv">Copy content!</button> </form>

Answer 1

What you are doing is trying to add math functions to string In your case a is a string and b is a number So you try to convert a to number and b to string. That won't work This worked for me

$(document).ready(function() {
  document.getElementById("idofdiv").style.display = "none";
  document.getElementById("copybutton").style.display = "none";

  $("#showbuttonid").click(function() {
    var a = $("input#inputvaluebox").val();
    var c = parseInt(a)
    var b = c * 10;
    var d = "Value is" + b;
    document.getElementById("idofdiv").style.display = "block";
    document.getElementById("copybutton").style.display = "block";
    document.getElementById("idofdiv").innerHTML = d;
  });
});

Answer 2

You just need one more line of code. Just take a read in the official documentation: https://clipboardjs.com/#setup

  new ClipboardJS('#copybutton')

 $(document).ready(function() { document.getElementById("idofdiv").style.display = "none"; document.getElementById("copybutton").style.display = "none"; $("#showbuttonid").click(function() { var a = $("input#inputvaluebox").val(); var b = a * 10; var b = "Value is " + b; document.getElementById("idofdiv").style.display = "block"; document.getElementById("copybutton").style.display = "block"; document.getElementById("idofdiv").innerHTML = b; }); new ClipboardJS('#copybutton') });

 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap'); .labelclass { font-size: 20px; font-family: 'Open Sans', sans-serif; }.inputvaluecss { box-sizing: border-box; border: 1px solid #DDDDDD; outline: none; margin-left: 42px; margin-top: 16px; width: 275px; padding-top: 12px; padding-left: 15px; padding-bottom: 12px; }.inputvaluecss:focus { box-shadow: 0 0 5px #2EDC29; border: 1px solid #2EDC29; }.divclass { font-size: 20px; font-family: 'Open Sans', sans-serif; color: black; background-color: white; width: 700px; padding-left: 18px; padding-top: 13px; padding-bottom: 13px; padding-right: 18px; box-sizing: border-box; border: 1px solid #DDDDDD; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> <form> <br> <label for="inputvaluebox" class="labelclass">Input Value</label> <input type="text" id="inputvaluebox" name="inputvaluename" class="inputvaluecss"><br><br> <input type="reset" id="resetbuttonid"> <button type="button" id="showbuttonid">Show</button><br><br><br> <div id="idofdiv" class="divclass"></div><br> <button type="button" id="copybutton" data-clipboard-target="#idofdiv">Copy content!</button> </form>