0

The sample I'm copying from on codepen works fine: http://codepen.io/SitePoint/pen/vNvEwE

<label for="website">Website:</label>
<input type="text" id="website" value="http://www.sitepoint.com/" />
<button data-copytarget="#website">copy</button>

<label for="twitter">Twitter:</label>
<input type="text" id="twitter" value="http://twitter.com/craigbuckler" />
<button data-copytarget="#twitter">copy</button>

/*
    Copy text from any appropriate field to the clipboard
  By Craig Buckler, @craigbuckler
  use it, abuse it, do whatever you like with it!
*/
(function() {

    'use strict';

  // click events
  document.body.addEventListener('click', copy, true);

    // event handler
    function copy(e) {

    // find target element
    var 
      t = e.target,
      c = t.dataset.copytarget,
      inp = (c ? document.querySelector(c) : null);

    // is element selectable?
    if (inp && inp.select) {

      // select text
      inp.select();

      try {
        // copy text
        document.execCommand('copy');
        inp.blur();

        // copied animation
        t.classList.add('copied');
        setTimeout(function() { t.classList.remove('copied'); }, 1500);
      }
      catch (err) {
        alert('please press Ctrl/Cmd+C to copy');
      }

    }

    }

})();

When I write the code on localhost or upload to my server, it doesn't work. Pretty sure I'm copying it exactly.

http://loverant.com/bootstraptest/

I'm new to coding so I'm probably just missing something really stupid.

Matt MacPherson
  • 175
  • 1
  • 8

1 Answers1

1

As tested on your page http://loverant.com/bootstraptest/ the javascript part is running sooner before the whole DOM is loaded and parsed in the browser. In console there is script.js:11 Uncaught TypeError: Cannot read property 'addEventListener' of null error on accessing the document.body.

Move your entire javascript at the bottom just before the closing </body> tag.

<html>
<head>
 <link href="style.css" rel="stylesheet">
</head>
<body>
 <label for="website">Website:</label>
 <input type="text" id="website" value="http://www.sitepoint.com/" />
 <button data-copytarget="#website">copy</button>

 <label for="twitter">Twitter:</label>
 <input type="text" id="twitter" value="http://twitter.com/craigbuckler" />
 <button data-copytarget="#twitter">copy</button>

 <script type="text/javascript">
 /*
 Copy text from any appropriate field to the clipboard
 By Craig Buckler, @craigbuckler
 use it, abuse it, do whatever you like with it!
 */
 (function() {
  'use strict';

    // click events
    document.body.addEventListener('click', copy, true);

  // event handler
  function copy(e) {
   // find target element
   var
      t = e.target,
      c = t.dataset.copytarget,
      inp = (c ? document.querySelector(c) : null);

   // is element selectable?
   if (inp && inp.select) {
      // select text
      inp.select();

      try {
     // copy text
     document.execCommand('copy');
     inp.blur();

     // copied animation
     t.classList.add('copied');
     setTimeout(function() { t.classList.remove('copied'); }, 1500);
      }
      catch (err) {
     alert('please press Ctrl/Cmd+C to copy');
      }
   }
  }
 })();
 </script>
</body>
</html>

If you will include the javascript from external file, you need to insert it also at the bottom. As an alternative you can use jquery and envelope the whole javascript to $(function() { // your code // }); this will make sure your code will always be launched after the full DOM was parsed by browser and will not matter where you will place your code.

Filip Matthew
  • 298
  • 2
  • 8