点击复制innerHTML文本字段的内容？

Question

最近我写了一些代码，后来将用作随机字符串/数字生成器。字符串在只读文本字段内生成。 innerHTML之中。我想添加一个点击复制按钮，允许用户轻松复制生成的字符串，并开始使用ZeroClipboard。如果我想复制随机生成的字符串，我想知道是否有人能指出我正确的方向。 ZeroClipboard，因为我在尝试组合代码时遇到了一些麻烦。

谢谢！

随机字符串生成代码：
这里有一个实例：http://hawkgen.com/gen/

   <!-- The first select list -->
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="buttons.css">
    <link rel="stylesheet" href="buttons-core.css">
    <link rel="stylesheet" href="forms.css">
    <link rel="stylesheet" href="forms-r.css">
    <center>
    <form class="pure-form">
    <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
     <option>- - -</option>
     <option value="amazon">Amazon</option>
     <option value="apple">Apple</option>
     <option value="keurig">Keurig</option>
     <option value="nike">Nike</option>
    </select>
    <!-- Tags for the seccond dropdown list, and for text-content -->
    <span id="slist2"></span> <div id="scontent"></div>
    <div
    <form class="pure-form">
    <input type="text" value="Code" readonly id="display">
    </form>
    </div>
    <br>
    <input type="button" onclick="SList.getSelect('scontent','go');" class="pure-button pure-button-primary" value="Generate">
    </center>
    </form>

  <script>
    var choice2;
    function setChoice(value) {
        choice2 = value;

    }
    /* Script Double Select Dropdown List, from: coursesweb.net/javascript/ */
    var SList = new Object();             // JS object that stores data for options

    // HERE replace the value with the text you want to be displayed near Select
    var txtsl2 = '';

    /*
     Property with options for the Seccond select list
     The key in this object must be the same with the values of the options added in the first select
     The values in the array associated to each key represent options of the seccond select
    */
    SList.slist2 = {
     "amazon": ['Kindle Fire HD', 'Kindle Charger', 'Kindle Fire HDX'],
     "apple": ['MacBook', 'iMac', 'iPhone', 'iPad'],
     "keurig": ['Platinum', 'Vue'],
     "nike": ['Fuel Band']
    };


    /*
     Property with text-content associated with the options of the 2nd select list
     The key in this object must be the same with the values (options) added in each Array in "slist2" above
     The values of each key represent the content displayed after the user selects an option in 2nd dropdown list
    */

SList.scontent = {
 "Kindle Fire HD": 'kindlefirehd',
 "Kindle Charger": 'kindlecharge',
 "Kindle Fire HDX": 'kindlefirehdx',
 "MacBook": 'macbook',
 "iMac": 'imac',
 "iPhone": 'iphone',
 "iPad": 'ipad',
 "Platinum": 'platinum',
 "Vue": 'vue',
 "FuelBand": 'fuelband'
};





        /* From here no need to modify */

    // function to get the dropdown list, or content
    SList.getSelect = function(slist, option) {
        if (option == 'go') {
            option = choice2;
        }
      document.getElementById('scontent').innerHTML = '';           // empty option-content

      if(SList[slist][option]) {
        // if option from the last Select, add text-content, else, set dropdown list
        if(slist == 'scontent'){;
var selected = SList[slist][option];
functions[selected]();
}
        else if(slist == 'slist2') {
          var addata = '<option>- - -</option>';
          for(var i=0; i<SList[slist][option].length; i++) {
            addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
          }

          document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="setChoice(this.value);">'+addata+'</select>';
        }
      }
      else if(slist == 'slist2') {
        // empty the tag for 2nd select list
        document.getElementById('slist2').innerHTML = '';
      }
    }

    var functions = {

        kindlefirehd: function(){
    var secondPossible = 'ABCDEFGHJKLMNPQRSVWY123456';
    var firstPossible = '123456';
    var firstLength = 1;
    var secondLength = 2;

    var firstString = Array.apply(null, new Array(firstLength)).map(function () {
    return firstPossible[Math.floor(Math.random() * firstPossible.length)];
    }).join('');
    var secondString = Array.apply(null, new Array(secondLength)).map(function () {
    return secondPossible[Math.floor(Math.random() * secondPossible.length)];
    }).join('');

    document.getElementById("display").value='D0FB A0A0 343' + firstString + ' 0A' + secondString

        },
        kindlecharge: function(){window.alert("func1 called")},
        kindlefirehdx: function(){window.alert("func1 called")},
        macbook: function(){window.alert("func1 called")},
        imac: function(){window.alert("func1 called")},
        iphone: function(){window.alert("func1 called")},
        ipad: function(){window.alert("func1 called")},
        platinum: function(){window.alert("func1 called")},
        vue: function(){window.alert("func1 called")},
        fuelband: function(){window.alert("func1 called")}
    }





    </script>

ZeroClipboard代码：
这里的实例：http://hawkgen.com/ZeroClipboard/

<html>
  <body>
<button id="target-to-copy" data-clipboard-target="clipboard-text">Click To Copy</button>
<input name="clipboard-text" id="clipboard-text" value="clipboardtesttext">

    <script src="ZeroClipboard.js"></script>
    <script src="main.js"></script>
  </body>
</html>