Uncaught TypeError: Kann die Eigenschaft 'width' von null nicht lesen

8

Ich weiß eigentlich nicht, was passiert ist, weil es letzte Nacht funktioniert hat. Wie auch immer, ich versuche eine Zeichnungsapplikation mit HTML5 und Javascript zu machen. Dies ist das erste Mal, dass ich JS richtig angeschaut und etwas damit erstellt habe, also habe ich meinen Code von verschiedenen Tutorials und Hilfe von anderen Freunden bekommen. Ich bin ein N00b. Ich habe folgendes benutzt:

  1. github.com/jaseemkp/paint-app-with-save-facility
  2. codeTheorie.in/different-tools-for-our-sketching-application /
  3. HTML5-Canvas-Kochbuch - Kapitel 6: Interaktion mit dem Canvas: Anhängen von Ereignislistenern an Formen und Regionen - Erstellen einer Zeichnung Anwendung. (Ich habe die Speicherfunktion von diesem)

Wenn ich meine Arbeit in Chrome teste, erhalte ich den Fehler

  

"Uncaught TypeError: Kann die Eigenschaft 'width' von null nicht lesen"

bezieht sich auf Zeile 4 meiner Skriptdatei, die

ist %Vor%

Ich habe versucht, damit herumzutüfteln, um ein Text-Feature hinzuzufügen, aber ich konnte es einfach nicht zum Laufen bringen, also habe ich einfach alles rückgängig gemacht und jetzt produziert es diesen Fehler.

Vollständiges Skript:

%Vor%

Vollständiger HTML-Code

%Vor%

CSS

%Vor%

Wenn ich es auf einen kostenlosen Server hochgeladen habe, habe ich verschiedene Fehler. Oh, ich bin so verwirrt, ich hoffe, da ist jemand da draußen, der einen Sinn hat: /

Vielen Dank im Voraus!

    
swaistle 12.05.2013, 15:38
quelle

1 Antwort

5

Sie importieren Ihr Skript , bevor der Browser die Möglichkeit hatte, den Dokumenttext zu analysieren. Daher existiert das Element <canvas> nicht an dem Punkt, an dem Sie es durch seinen "id" -Wert suchen.

Da Sie jQuery trotzdem importieren, können Sie einen "ready" -Handler verwenden, aber dann haben Sie einige Probleme mit der Art, wie Sie Event-Handler anhängen. Ihre attributbasierten Event-Handler verlassen sich darauf, dass diese Handler-Funktionen global sind, was nicht der Fall ist, wenn Sie sie in einen "ready" -Handler setzen.

Viel einfacher wäre es jedoch, wenn Sie einfach Ihr <script> -Tag (oder beide) an das Ende von <body> verschieben. Auf diese Weise wird das DOM analysiert und Ihre getElementById() -Aufrufe sollten funktionieren. Viele Leute raten dazu, Scripts am Ende von <body> trotzdem als Best Practice zu betrachten.

Wenn Sie das nicht tun, nehme ich an, Sie könnten etwas tun, indem Sie die Deklarationen oben im Skript ändern:

%Vor%

Es wäre besser, entweder jQuery vollständig zu übernehmen und damit Event-Handler zuzuweisen, oder es einfach nicht zu importieren.

    
Pointy 12.05.2013, 15:39
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Zeromq: Verwenden des Majordomo-Brokers mit asynchronen Clients