爲什麼我的腳本無法正常工作，我認爲一切順利

爲什麼我的腳本無法正常工作。我從jsfiddle.com複製了代碼，它在那裏工作，但在我的瀏覽器中沒有。原因可能是什麼？爲什麼我的腳本無法正常工作，我認爲一切順利

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

來源

2017-10-29 MaRK

腳本運行在它的位置在代碼中 - 在那個時候，HTML還不存在。在jsfiddle中，它是（默認情況下）設置爲在頁面加載完成時運行。當頁面準備就緒時，添加onload或document.ready以運行腳本。 –

按鈕處理程序位於「onlick」屬性上... – YoTengoUnLCD

問題是你的JavaScript函數加載頭內產生的元素之前它被調用。添加以下代碼，

window.addEventListener('load', function() { 
    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); 
    } 
    });

DEMO

<!doctype html> 
 
<html> 
 
<head> 
 
    <title>JavaScript test</title> 
 
    <script> 
 
    window.addEventListener('load', function() { 
 
    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>

來源

2017-10-29 06:19:29 Sajeetharan

我可以看到你起重文件中讀取的DOM元素之前設置一個事件偵聽器（的document.getElementById（「按鈕」）的onclick =重複;）。這樣做會引發錯誤。如果您在試圖操作的元素後面運行腳本和提升，那麼它看起來很有效。

<html> 
 
<head> 
 
    <title>JavaScript test</title> 
 
    <script> 
 

 
    </script> 
 
</head> 
 
<body> 
 
    <button id="button" onlick="duplicate()">Click me</button> 
 
    <div id="duplicater"> 
 
     duplicate EVERYTHING INSIDE THIS DIV 
 
    </div> 
 
    <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> 
 
</body> 
 
</html>

來源

2017-10-29 06:19:25

你需要調用它在你的javascript功能之前首先進行初始化的元素。所以只需在你的標籤之前轉移你的javascript。

<!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> 
    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> 
</body> 
</html>

來源

2017-10-29 06:21:11

腳本標記必須寫在頁面的末尾。

<html> 
<head> 
    <title>JavaScript test</title> 
    <script> 

    </script> 
</head> 
<body> 
    <button id="button" onlick="duplicate()">Click me</button> 
    <div id="duplicater"> 
     duplicate EVERYTHING INSIDE THIS DIV 
    </div> 
    <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> 
</body> 
</html>

來源

2017-10-29 06:25:45

您需要添加腳本主體部分

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>

來源

2017-10-29 06:27:28

爲什麼我的腳本無法正常工作，我認爲一切順利

回答

相關問題