Why my script doesn't work, I think all done well

Why my script doesn't work. I copied the code from jsfiddle.com, there it works, but in my browser not. What the reasons can be ?

<!doctype html>
<html>
<head>
  <title>JavaScript test</title>
  <script>
  document.getElementById('button').onclick = duplicate;
  var i = 0;
  var original = document.getElementById('duplicater');
  function duplicate() {
      var clone = original.cloneNode(true); 
      clone.id = "duplicetor" + ++i; 
      original.parentNode.appendChild(clone);
  }
  </script>
</head>
<body>
  <button id="button" onlick="duplicate()">Click me</button>
  <div id="duplicater">
      duplicate EVERYTHING INSIDE THIS DIV
  </div>
</body>
</html>

Answers 1

  • You need to add your script in body section

      document.getElementById('button').onclick = duplicate;
      var i = 0;
      var original = document.getElementById('duplicater');
      function duplicate() {
          var clone = original.cloneNode(true); 
          clone.id = "duplicetor" + ++i; 
          original.parentNode.appendChild(clone);
      }
    <!doctype html>
    <html>
    <head>
      <title>JavaScript test</title>
    </head>
    <body>
      <button id="button" onlick="duplicate()">Click me</button>
      <div id="duplicater">
          duplicate EVERYTHING INSIDE THIS DIV
      </div>
      <script type='text/javascript'>
      </script>
    </body>
    
    </html>


Related Articles