2017-05-29 5 views
-5

Ich bin auf der Suche nach einer Post-it-Anwendung in meiner Django-Website mit Javascript/JQuery zu integrieren.Javascript SyntaxError: fehlt; vor der Aussage

ich etwas als Tutorial gefunden, und ich versuchte, es in meinem Skript einzufügen, aber ich erhalte Syntaxerror:

SyntaxError: missing ; before statement  post-it.js:2:19 

Ich weiß nicht, Javascript langage, so dass es ein bisschen kompliziert für mich, aber ich don‘ t sehen, wo ; fehlen:/

Das ist mein HTML-post-it-Teil:

<h1>Post-It</h1> 
<input type="button" value="Ajouter un Post-It" id="btn-addNote" /> 
<div id="board"></div> 

Dies ist meine Javascript-Datei:

(function ($, $S) { 
// $jQuery 
// $S window.localStorage 
// Déclaration des variables 
var $board = $('#board'), 
// Placement des Post-It 
Postick, //Object Singleton contenant les fonctions pour travailler sur le LocalStorage 
len = 0, 
// Nombre d'objets dans le LocalStorage 
currentNotes = », 
// Stockage du code HTML de l'élément Post-It 
o; // Données actuelles du Post-It dans le localStorage 

// Gérer les Post-It dans le LocalStorage 
// Chaque objet est enregistré dans le localStorage comme un Object 
Postick = { 
add: function (obj) { 
obj.id = $S.length; 
$S.setItem(obj.id, JSON.stringify(obj)); 
}, 

retrive: function (id) { 
return JSON.parse($S.getItem(id)); 
}, 

remove: function (id) { 
$S.removeItem(id); 
}, 

removeAll: function() { 
$S.clear(); 
}, 

}; 

// S'il existe des Post-It on les créer 
len = $S.length; 
if (len) { 
for (var i = 0; i < len; i++) { 
// Création de tous les Post-It se trouvant dans le localStorage 
var key = $S.key(i); 
o = Postick.retrive(key); 
currentNotes += '<div class="postick"'; 
currentNotes += ' style="left:' + o.left; 
currentNotes += 'px; top:' + o.top; 
// L'attribut data-key permet de savoir quelle note on va supprimer dans le localStorage 
currentNotes += 'px"><div class="toolbar"><span class="delete" data-key="' + key; 
currentNotes += '">x</span></div><div contenteditable="true" class="editable">'; 
currentNotes += o.text; 
currentNotes += '</div></div>'; 
} 

// Ajoute tous les Post-It sur le tableau de bord 
$board.html(currentNotes); 
} 

// Dès que le document est chargé, on rend tous les Post-It Draggable 
$(document).ready(function() { 
$(".postick").draggable({ 
cancel: '.editable', 
"zIndex": 3000, 
"stack" : '.postick' 
}); 
}); 

// Suppression du Post-It 
$('span.delete').live('click', function() { 
if (confirm('Etes vous sûr de vouloir supprimer cette note ?')) { 
var $this = $(this); 
// L'attribut data-key permet de savoir quelle note on va supprimer dans le localStorage 
Postick.remove($this.attr('data-key')); 
$this.closest('.postick').fadeOut('slow', function() { 
$(this).remove(); 
}); 
} 
}); 

// Création du Post-It 
$('#btn-addNote').click(function() { 
$board.append('<div class="postick" style="left:20px;top:70px"><div class="toolbar"><span class="delete" title="Fermer">x</span></div><div contenteditable class="editable"></div></div>'); 
$(".postick").draggable({ 
cancel: '.editable' 
}); 
}); 

// Sauvegarde tous les Post-It lorsque l'utilisateur quitte la page 
window.onbeforeunload = function() { 
// Nettoyage du localStorage 
Postick.removeAll(); 
// Puis on insère chaque Post-It dans le LocalStorage 
// Sauvegarde la position du Post-It, afin de le replacer lorsque la page est chargée à nouveau 
$('.postick').each(function() { 
var $this = $(this); 
Postick.add({ 
top: parseInt($this.position().top), 
left: parseInt($this.position().left), 
text: $this.children('.editable').text() 
}); 
}); 
} 
})(jQuery, window.localStorage); 

Danke :)

PS: Ich Sache, dass die Syntax von dort rechts kommt: currentNotes = »,

+0

-2? Meine Frage ist Fokus auf ein echtes Problem ... – Deadpool

+1

zitieren Sie Ihre »mit '»'. –

+0

'currentNotes = ',' sollte 'currentNotes ='» ', ' – Mamun

Antwort

1

Protip: Bei der Entwicklung, halten Vertiefungen kühlen. Sie Eindruck hier ist ein Durcheinander und ist schwer zu Code-Blöcke folgen. Ich weiß, du bist neu, also mach dir keine Sorgen, aber gewöhne dich daran, eine saubere Einrückung zu haben.

Jetzt, wenn Sie den Code erhalten und führen Sie es an anderer Stelle (Chrome-Konsole, jsfiddle oder was auch immer) es Ihnen die genaue Zeile, wo der Fehler passiert, wie ein SyntaxError ist und diese Art von Fehlern passiert, wenn die Engine ist Überprüfen Sie den Code, aber nicht ausführen, so ist nicht erforderlich, dass alle benötigten Bibliotheken zusammen mit dem Code geladen werden.

Wenn Sie diese Geige überprüfen: http://jsfiddle.net/8now04xs/1 In der Konsole werden Sie feststellen, dass der Fehler von der Linie 54 kommt, und wenn Sie darauf klicken (Being in CHrome DevTools) führt Sie direkt zu der Zeile mit dem Problem: http://i.imgur.com/G8tPl92.gifv

Sie hatten Recht, der Fehlercode kommt von der Linie, die Sie sagten. Das Problem ist, dass es sich weder um eine Zeichenfolge noch um eine Zahl oder ein gültiges Schlüsselwort handelt. Ist ein ungültiges Zeichen

Ich lese nicht den ganzen Code, aber ich denke, dass Sie wollen, dass es eine Zeichenfolge ist. In JavaScript (und fast alle Sprachen) müssen Strings entweder mit einfachen oder doppelten Anführungszeichen angegeben werden, wie folgt aus:

currentNotes = "»", 

Wenn Sie um den Rest des Codes betrachten, werden sich Ihnen viele Saiten nach diesem Muster , damit Sie besser verstehen können, wie das funktioniert. Wenn Sie es wollen, eine leere Zeichenfolge sein, dann müssen Sie es richtig, diese:

currentNotes = "", 

Wenn Sie genau hinsehen, es Sinn macht.

Nach dem Beheben dieses Fehlers wird die Fiddle fehlschlagen, da sie versuchen wird, den Code auszuführen und eine Menge Probleme zu bekommen, weil sie nicht in Ihrer Django-Umgebung läuft.

+0

Vielen Dank für Ihre Antwort;) Es ist das erste Mal, dass ich JavaScript-Skript lese. Über Einrückungen sind alle meine Skripte gut eingerückt. Ich nahm dieses js-Skript auf einer Website, weil es eine Post-It-Javascript-Demonstration ist. Daher kopiere ich ausnahmslos auf meiner Django-Website. In Firebug, habe ich die Zeile post-it.js: 2: 19 so bedeutet es Zeile 2 Element 19 oder Zeile 19 Element 2? – Deadpool

+0

@Deadpool Zeile 2, Zeichen 19. Das Problem ist, dass Django Ihr Skript in irgendeiner Weise sandboxiert, also ist es nicht die richtige Zeile, die Sie vor sich haben. Deshalb habe ich gesagt, es anderswo zu machen. Zum Beispiel, überprüfen Sie diese Geige: https://jsfiddle.net/8now04xs/1/ Wenn Sie auf die Konsole schauen, es sagt Zeile 54, und in Chrome DevTools, wenn Sie darauf klicken, wird es Sie auf die genaue Linie führen (siehe gif): http://i.imgur.com/G8tPl92.gifv (Ich liebe Chrome DevTools xD) –

0

Ich überprüfe Ihren Code auf jshint. Es gibt 2 Problem.

1. Zitieren '»' [Ich erwähne bereits darüber auf Kommentar.]

  1. Fehlende ;
 
    }; // Missing ; in this line. 
})(jQuery, window.localStorage); 
+0

@Deadpool löst das dein Problem? –

Verwandte Themen