Warum mein Skript nicht funktioniert, denke ich, alles gut gemacht

Warum mein Skript nicht funktioniert. Ich habe den Code von jsfiddle.com kopiert, da funktioniert es, aber in meinem Browser nicht. Was können die Gründe sein?Warum mein Skript nicht funktioniert, denke ich, alles gut gemacht

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

Quelle

2017-10-29 MaRK

Das Skript läuft an seiner Stelle im Code - zu dieser Zeit, wird der HTML noch nicht vorhanden ist. In jsfiddle wird (standardmäßig) festgelegt, dass die Seite nach dem Laden der Seite ausgeführt wird. Fügen Sie ein onload oder document.ready hinzu, um Ihr Skript auszuführen, wenn die Seite fertig ist. –

Der Button-Handler befindet sich auf dem Attribut "onlick" ... – YoTengoUnLCD

Ausgabe wird Ihr ist Javascript-Funktion innerhalb Kopf geladen, die das Element aufgerufen wird, bevor erzeugt wird. Fügen Sie den folgenden Code,

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>

Quelle

2017-10-29 06:19:29 Sajeetharan

Ich kann sehen, dass Sie das Hochziehen und Einstellen eines Ereignis-Listener, bevor das DOM-Element in dem Dokument (document.getElementById ('Button') Onclick = Duplikat.) Gelesen wird. Dies führt zu einem Fehler. Wenn Sie Ihr Skript ausführen und nach dem Lesen des zu manipulierenden Elements hissen, scheint es zu funktionieren.

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

Quelle

2017-10-29 06:19:25

Sie müssen zuerst das Element initialisiert, bevor es auf Ihrem Javascript-Funktion aufrufen. Übertragen Sie einfach Ihr Javascript vor Ihrem Tag.

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

Quelle

2017-10-29 06:21:11

Das Skript-Tag muss am Ende der Seite geschrieben werden.

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

Quelle

2017-10-29 06:25:45

Sie benötigen Skript in Körperabschnitt hinzufügen

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>

Quelle

2017-10-29 06:27:28

Warum mein Skript nicht funktioniert, denke ich, alles gut gemacht

Antwort

Verwandte Themen