JSFIDDLEでは動作しますが、.htmlでは動作しません

私は分かりません。以下のコードはJSFIDDLEでは完璧に動作しますが、私のページでは動作しません。このコードは、DIV内のすべてのコピーを追加します。 https://jsfiddle.net/zv98a60m/1/JSFIDDLEでは動作しますが、.htmlでは動作しません

JS：HTMLの

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); 
}

一部：ここで働いてJSFIDDLEへのリンクがあります

<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ファイル名が正しいなど

出典

2016-12-09 Grv21

[me]（https://learn.jquery.com/using-jquery-core/document-ready/）が見つからないことがありますか？ – philantrovert

私はあなたが 'duplicate（）;を追加すべきだと思います。私は2つの括弧を意味します。 – WasteD

ブラウザのコンソールエラーを確認し、見つかった場合は、この投稿に追加してください。ありがとう –

唯一ました間違っている、あなたは早すぎるあなたのJavaScriptを含めることですか？以下のように試してみてください。

なぜjs fiddleで作業していますか？ jsfiddleにはjavascriptが最後に含まれているため、または他の答えに見られるように、すべてがロードされるまで待機します。

<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>

出典

2016-12-09 08:55:41 caramba

これはそうだった。ありがとうございました。私は関連するすべてのコーディングには新しいので、分かりませんでした。 "なぜjs fiddleに取り組んでいるのですか？jsfiddleにはjavascriptが最後に含まれているか、他の回答に見られるように、すべてがロードされるまで待ちます。 < - これは私のような答えnewbsの種類です;なぜ何かがうまくいかない。どうもありがとう！ – Grv21

変更があり、あなたの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>

必要な唯一の変更は、それが

出典

2016-12-09 08:51:14 rushil

すでに内容があります複写機で：2divs –

はい、私はあなたがクローン化されているかもしれないとしても、ブラウザでdivをチェックできないと思います.... in fiddle cssどの色がブラウザに表示されるように黒色ボックスに分割されます – rushil

私は自分の答えにCSSコードを追加しています。もう一度それを確認することができます...それはうまくいくでしょう。 – rushil

をクローン化することができることにdiv要素「duplicater」のコンテンツを追加することであるハイテク機能を以下にあなたのjsのコードを配置...

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

出典

2016-12-09 08:51:18 spankajd

はい私は文書が準備されるのを待つつもりでした。イベントをバインドする前に – spankajd

JSFIDDLEでは動作しますが、.htmlでは動作しません

答えて

関連する問題