Aufruf der Funktion aus dem externen JS

Ich versuche, eine Funktion aufzurufen, die von einem externen .js-Datei, aber die Konsole ist der Fehler zurückgeben, und die Funktion wird nicht aufgerufen. Wie kann ich richtige mein code und in der Lage sein, um die Funktion aufzurufen richtig.

Hier ist die main .html-Datei: 

<html>
<head>
    <script type="text/javascript" src="xp.js">
    </script>
    <script type="text/javascript">
        window.onload = xyz.makeShape.Circle();
    </script>
</head>
<body>
    <canvas id="xyz" width="600" height="600"></canvas>
</body>
</html>

Und hier ist die .js-Datei:

var xyz = xyz || {};
var canvas = document.getElementById('xyz');
var context = canvas.getContext('2d');
xyz.makeShape = {
    Circle : function() {
        console.log('working');
    }
}

EDIT

Ich bin immer 2 Fehler in der Konsole:

Fehler 1

TypeError: canvas is null
window.onload = xyz.makeShape.Circle;


Fehler 2

TypeError: xyz.makeShape is undefined
window.onload = xyz.makeShape.Circle;
window.onload = xyz.makeShape.Circle(); sollte window.onload = xyz.makeShape.Circle;, auch Sie müssen warten, bis das Dokument geladen ist, bevor Sie bekommen können, Verweise auf DOM-Elemente, hier canvas und context undefiniert.
"die Konsole ist der Fehler zurückgeben" ... und welche Fehler wären das? Ich denke, Sie sollten einen Blick auf stackoverflow.com/q/14028959/218196.
In der Zukunft, wenn Sie aufgenommen hatte, werden die Fehlerinformationen in Ihrer ursprünglichen Frage, deine Frage wäre beantwortet worden, in ein paar Minuten anstatt dass alle diese hin und her Diskussion, um herauszufinden, was Sie sehen. Jedenfalls, froh, Sie haben es gelöst schließlich.

InformationsquelleAutor Samarth Wahal | 2013-03-30

  1. 5

    Ändern:

    window.onload = xyz.makeShape.Circle();

    :

    window.onload = xyz.makeShape.Circle;

    window.onload gesetzt werden muss, um eine Funktion verweisen, nicht auf die Ergebnisse von aufrufen einer Funktion.

    Du auch nicht tun können, diese beiden Linien von der <head> Abschnitt vor dem DOM geladen ist:

    var canvas = document.getElementById('xyz');
var context = canvas.getContext('2d');

    Müssen Sie ausführen, nachdem das DOM geladen wurde. Es gibt mehrere mögliche Strategien, dies zu tun. Die einfachste für das, was Sie bereits haben, wäre führen Sie Sie in Ihre onload-handler, da Sie wissen, der DOM bereits geladen ist es. Sie könnten auch verschieben Sie die Skript-tag, lädt Ihre externen .js-Datei am Ende der <body> Abschnitt und der DOM wird schon bereit sein, dann, wenn die js-Datei ausgeführt wird.

    Funktioniert es immer noch nicht.
    jetzt komm schon. "Es ist immer noch nicht arbeiten", sagt uns absolut NICHTS über das, was Sie sehen. Erwarten Sie uns raten? Helfen Sie, die Menschen, die versuchen, zu helfen, Sie zu beschreiben, was da genau Los ist und was in der Fehler-Konsole.
    Ich fügte hinzu, ein weiteres problem auf meine Antwort.

    InformationsquelleAutor jfriend00

  2. 0

    Werden Sie nur brauchen, um die js - Datei mit der <script> - tags - entweder in der Kopf-oder Fußzeile.

    <script type="text/javascript" src="js/yourjsfile.js"></script>

    Jetzt können Sie Funktionen aufrufen, die von diesem Skript, als wären Sie in der aktuellen Datei

    Bearbeiten

    Wenn du sicher bist, dass die Datei bereits enthalten (stellen Sie zunächst sicher du hast den richtigen Weg) als Nächstes müssen Sie überprüfen Sie Ihre Konsole für die Fehler, die auftreten können, die sich aus der Datei enthalten. Der code, den Sie geliefert haben, sieht richtig aus.

    Es ist bereits im Lieferumfang enthalten.
    Ich habe ein kleine edit. Sind Sie auf der sicher Sie haben den richtigen Pfad zu der Datei?
    Ich bin nicht der OP.
    häufiger Fehler 🙂 - Aber ja, ich sehe, dass die OP denkt in die Datei aufgenommen wurde, bedeutet das nicht, dass der Pfad stimmt allerdings.
    Der Pfad der Datei ist vollkommen korrekt. Ich habe bearbeitet die Frage und fügte hinzu, die Fehler.

    InformationsquelleAutor What have you tried

  3. 0

    Externe js:

    var xyz = xyz || {};
xyz.makeShape = {
    Circle: function () {
        console.log('working');
    }
}

    Interne js:

    window.onload = function () {
    var canvas = document.getElementById('xyz');
    var context = canvas.getContext('2d');
    xyz.makeShape.Circle();

}

    Getestet und funktioniert

    InformationsquelleAutor Daniel

Schreibe einen Kommentar