为什么我的脚本无法正常工作，我认为一切顺利

为什么我的脚本无法正常工作。我从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

为什么我的脚本无法正常工作，我认为一切顺利

回答

相关问题