Works on JSFIDDLE but not on .html

Question

I just don't understand. The code below works perfectly on JSFIDDLE but not on my page I'm doing. The code adds a copy of everything inside the DIV. Here's the link to working JSFIDDLE: https://jsfiddle.net/zv98a60m/1/

JS:

document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicetor" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
}

part of the HTML:

<body>
<script src="add.js" language="Javascript" type="text/javascript"></script>

<div class="wrapper">
                <button id="button" onlick="duplicate()">Click me</button>

    <div id="duplicater">   
        <div id="box-margin">   
            <div id="discussion-box">
            </div> <!-- Ends discussion-box -->
        </div> <!-- Ends box-margin -->
    </div>      


            <div id="circle">
                    <div class="cross">
                        <div class="cross2">
                        </div> <!-- Ends cross2 -->
                    </div> <!-- Ends cross -->
                </div> <!-- Ends circle -->

JS file name is correct etc.

Maybe you're missing [me](https://learn.jquery.com/using-jquery-core/document-ready/)? — philantrovert, Dec 09 '16 at 08:49
I think you should add `duplicate();` I mean the 2 brackets. — WasteD, Dec 09 '16 at 08:50
Check for any browser console error, and if you find any please add that to this post. Thanks — Sibeesh Venu, Dec 09 '16 at 08:51
The language attribute has been deprecated for a long time, and should not be used. — kevin seda, Dec 09 '16 at 08:53
*"but not on my page"* - what happens on your page? an error? nothing? what if you add an alert/console.log in `duplicate` - is it being called? — freedomn-m, Dec 09 '16 at 08:54
@kevinseda *"should **not** be used"* is a long way from *"obsolete and **can** be removed"* — freedomn-m, Dec 09 '16 at 08:55
the code gets executed before the elements have been loaded, try putting [`onload`](http://www.w3schools.com/jsref/event_onload.asp) to the code. — Kevin Kloet, Dec 09 '16 at 08:56
I have facing the same issue. With my that previous experience I can tell you one thing that you may be forget to link the js. Check the console using inspect element for errors. — Divyek, Dec 09 '16 at 08:57
Include the script at the end of the document or (as other suggest) wrap any code that relies on DOM elements to be on the page in a `$(document).ready()`. The element with id `button` does not exist when the script is ran because the script runs as soon as it's loaded and its loaded as soon as the browser encounters a ` — apokryfos, Dec 09 '16 at 08:57

score 1 · Accepted Answer · edited Dec 09 '16 at 09:21

The only thing which is wrong, is that you include your javascript too early. Try like below and then it will work.

Why it is working on js fiddle? Because jsfiddle includes the javascript at the end, or waits until everything is loaded, as seen in the other answers.

<body>


    <div class="wrapper">
                    <button id="button" onlick="duplicate()">Click me</button>

        <div id="duplicater">
            <div id="box-margin">
                <div id="discussion-box">

                  <p>This is the required change</p>

                </div> <!-- Ends discussion-box -->
            </div> <!-- Ends box-margin -->
        </div>


        <div id="circle">
                <div class="cross">
                    <div class="cross2">
                    </div> <!-- Ends cross2 -->
                </div> <!-- Ends cross -->
            </div> <!-- Ends circle -->

    </div>

    <!-- include your javascript always just before -->
    <!-- the closing </body> tag -->
    <!-- if as file make sure the path is correct -->
    <!-- <script src="add.js"></script> -->
    <script>


        document.getElementById('button').onclick = duplicate;
        var i = 0;
        var original = document.getElementById('duplicater');

        function duplicate() {
            var clone = original.cloneNode(true); // "deep" clone
            clone.id = "duplicetor" + ++i; // there can only be one element with an ID
            original.parentNode.appendChild(clone);
        }


    </script>
</body>

Yep, this was it. Thank you. I'm new to everything coding related so had no idea. "Why it is working on js fiddle? Because jsfiddle includes the javascript at the end, or waits until everything is loaded, as seen in the other answers." <-- This is the kind of answers newbs like me needs; why something doesn't work. Thanks a lot! — Grv21, Dec 09 '16 at 09:21

rushil · Answer 2 · 2016-12-09T08:57:19.300

0

change your html to :

  <style type="text/css">
    .wrapper {
    width: 100%;
  }

  #discussion-box{
    width: 50%;
    margin: 0 auto;
    height: 200px;
    background-color: #000;
    position: relative;
  }

  #box-margin {
    margin-top: 20px;
  }
  </style>
    <body>
    <script src="add.js" language="Javascript" type="text/javascript"></script>

    <div class="wrapper">
                    <button id="button" onlick="duplicate()">Click me</button>

        <div id="duplicater">   
            <div id="box-margin">   
                <div id="discussion-box">

                  <p>This is the required change</p>

                </div> <!-- Ends discussion-box -->
            </div> <!-- Ends box-margin -->
        </div>      


        <div id="circle">
                <div class="cross">
                    <div class="cross2">
                    </div> <!-- Ends cross2 -->
                </div> <!-- Ends cross -->
            </div> <!-- Ends circle -->

    </div>
    </body>

The only change needed is to add content in div "duplicater" to that it could be cloned

edited Dec 09 '16 at 08:57

answered Dec 09 '16 at 08:51

rushil

591
7
16

1

There's already content in `duplicater` : 2divs – freedomn-m Dec 09 '16 at 08:52
yes but i think you can not check div in browser, even if i might be cloned.... in fiddle css is added which colours div to a black box so that it is visible to browser – rushil Dec 09 '16 at 08:56
I am adding css code in my answer and you can check it again ...it will work – rushil Dec 09 '16 at 08:56
So you're saying: it already works, but the user can't see that it's working, so add some content to show it's working? – freedomn-m Dec 09 '16 at 08:57
yes or either add css which i edited....it will show black box as shown in fiddle and when you click button it will clone it and show 2 black box....just try agin my ans...i have edited it – rushil Dec 09 '16 at 09:00

spankajd · Answer 3 · 2016-12-09T08:54:56.460

0

hi place your js code in following function...

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

edited Dec 09 '16 at 08:54

answered Dec 09 '16 at 08:51

spankajd

934
7
13

Yes I meant to wait for document to be ready. before binding events. – spankajd Dec 09 '16 at 08:55

Works on JSFIDDLE but not on .html

3 Answers3