Javascript (jQ) problems: Div won't open?

function EditorDivOpen(a){
    $('#'+a).show();
}

function EditorDivFill(a,b){
    var init;
    if(a == 'smileys'){
        init = '<img src="data/img/smileys/sad.png" onclick="EditorTextFill(\':(\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/happy.gif" onclick="EditorTextFill(\':)\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/angelnot.gif" onclick="EditorTextFill(\'0:=)\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/angry.gif" onclick开发者_StackOverflow中文版="EditorTextFill(\'=(\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/blush.gif" onclick="EditorTextFill(\':@\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/cencored.png" onclick="EditorTextFill(\':*\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/confused.gif" onclick="EditorTextFill(\':?\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/cry.png" onclick="EditorTextFill(\';(\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/grin.gif" onclick="EditorTextFill(\':D\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/hmm.png" onclick="EditorTextFill(\':|\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/hypocrite.gif" onclick="EditorTextFill(\'0=)\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/lock.gif" onclick="EditorTextFill(\':x:\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/love.gif" onclick="EditorTextFill(\':3\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/sunglasses.gif" onclick="EditorTextFill(\'8)\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/shifty.gif" onclick="EditorTextFill(\'|)\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/shock.gif" onclick="EditorTextFill(\'O_o\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/shock.gif" onclick="EditorTextFill(\':o\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/sweatingbullets.gif" onclick="EditorTextFill(\'^_^\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/tongue.gif" onclick="EditorTextFill(\':p\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/tongue.gif" onclick="EditorTextFill(\':P\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/wink.gif" onclick="EditorTextFill(\';)\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/wry.gif" onclick="EditorTextFill(\'xo\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/wry.gif" onclick="EditorTextFill(\'XD\');" class="pointer" alt="smiley">
                <img src="data/img/smileys/wry.gif" onclick="EditorTextFill(\'xD\');" class="pointer" alt="smiley">';
    }
    else
    {
        init = '<b>[b][/b]</b>, <u>[u][/u]</u>, <i>[i][/i]</i>, <s>[s][/s]</s>, [img][/img], [url][/url].';
    }

    $('#'+b).html(init);
}


            <img src="data/img/smileys/happy.gif" alt="smileys" onclick="EditorDivOpen('edit-content'); EditorDivFill('smileys', 'edit-content');" class="pointer">
            <div id="edit-content">
            </div>

Hello again stackoverflow!

Im still working on the editor for my forum software. First was it self made, then wysiwyg, now im working on my own again. Well, nevermind.

I get some Javascript errors in the code above. The debugger in IE says that the 'String Constant is not completed' at the I of Smiley in the alt tag of this row: init = '<img src="data/img/smileys/sad.png" onclick="EditorTextFill(\':(\');" class="pointer" alt="smiley">

Any further help would be nice. Here's also a JsFiddle.

JavaScript doesn't allow multi-line string literals without an indicator on there telling it that, one easy solution is to add \ to each of your lines, like this:

init = '<img src="data/img/smileys/sad.png" onclick="EditorTextFill(\':(\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/happy.gif" onclick="EditorTextFill(\':)\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/angelnot.gif" onclick="EditorTextFill(\'0:=)\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/angry.gif" onclick="EditorTextFill(\'=(\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/blush.gif" onclick="EditorTextFill(\':@\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/cencored.png" onclick="EditorTextFill(\':*\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/confused.gif" onclick="EditorTextFill(\':?\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/cry.png" onclick="EditorTextFill(\';(\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/grin.gif" onclick="EditorTextFill(\':D\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/hmm.png" onclick="EditorTextFill(\':|\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/hypocrite.gif" onclick="EditorTextFill(\'0=)\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/lock.gif" onclick="EditorTextFill(\':x:\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/love.gif" onclick="EditorTextFill(\':3\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/sunglasses.gif" onclick="EditorTextFill(\'8)\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/shifty.gif" onclick="EditorTextFill(\'|)\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/shock.gif" onclick="EditorTextFill(\'O_o\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/shock.gif" onclick="EditorTextFill(\':o\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/sweatingbullets.gif" onclick="EditorTextFill(\'^_^\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/tongue.gif" onclick="EditorTextFill(\':p\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/tongue.gif" onclick="EditorTextFill(\':P\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/wink.gif" onclick="EditorTextFill(\';)\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/wry.gif" onclick="EditorTextFill(\'xo\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/wry.gif" onclick="EditorTextFill(\'XD\');" class="pointer" alt="smiley"> \
        <img src="data/img/smileys/wry.gif" onclick="EditorTextFill(\'xD\');" class="pointer" alt="smiley">';

You can try your fiddle here (notice there's still an error, but it's EditorDivOpen not begin defined).

You can't continue strings across line boundaries. You can however do this:

init = 'big long string that really should be done a totally different way' +
  'more stuff that should be done differently' +
  'still more ...';

Put the image names into an array, and then write a short piece of code to create the elements. Stop using DOM0 event handler setup ("onclick") and use a jQuery ".delegate()" to handle clicks on the images.

(OK so @Nick points out that you can "quote" the line separator with a backslash as an alternative.)

For the sake of the JavaScript God, have at least something like this instead:

var smileyData = [
   {image: "sad.png", shortcuts: [":("]}, 
   {image: "happy.gif", shortcuts: [":)"]}, 
   {image: "wry.gif", shortcuts: ["xo", "xd", "xD"]}
];
if(a == 'smileys'){
   var arrImages = [];
   $.each(smileyData, function(index, data) {
      var sImage = data["image"];
       $.each(data["shortcuts"], function (i2, shortcut) {
          arrImages.push('<img src="data/img/smileys/' + sImage + '" onclick="EditorTextFill(\'' + shortcut + '\');" class="pointer" alt="smiley" />');
       });
   });
   init = arrImages.join("");
}

This is not exactly what Pointy stated which is the ideal way, but it will still save you lots of headache - adding items to the smileyData array will be much more simple than repeating the same HTML over and over.

This is still essentially the same thing like you have now, just written in different way, that in my opinion is better and easier to manage. :)

Edited jsFiddle to play with: http://jsfiddle.net/VTFvB/1/