Syntax Missing ) when all ) seem to be there?

Question

Okay, so I've been building this website. One of the pages is a newsfeed www.wenotelling.x10.mx/news/ The news page has the newsfeed page embedded within it, which is where the actual updating happens. All that is very well and good, and that webpage seems to work. I was having 2 issues though.

1. The newsfeed didn't seem to update when the pages is loaded, but loads when the page is refreshed.
2. I wanted to add smileys.

So I wrote some JScript to fix both of these issues in one go. Since the newsfeed is updated through the HTML page, and I didn't want to have to hunt for the smiley's URL every time, I came up with the following code: http://www.wenotelling.x10.mx/news/smilescript.js

$(document).ready(function() 
{
    alert("Called");
    document.getElementByClass('happy').innerHTML = '<img src="smileys/happy.gif"></img>';
    document.getElementByClass('star').innerHTML = '<img src="smileys/star.gif"></img>';
    document.getElementByClass('dead').innerHTML = '<img src="smileys/dead.gif"></img>';
    document.getElementByClass('yawn').innerHTML = '<img src="smileys/yawn.gif"></img>';
    document.getElementByClass('snub').innerHTML = '<img src="smileys/snub.gif"></img>';
    document.getElementByClass('relax').innerHTML = '<img src="smileys/relax.gif"></img>';
    document.getElementByClass('devil').innerHTML = '<img src="smileys/devil.gif"></img>';
    document.getElementByClass('cool').innerHTML = '<img src="smileys/cool.gif"></img>';
    document.getElementByClass('wink').innerHTML = '<img src="smileys/wink.gif"></img>';
    document.getElementByClass('shock').innerHTML = '<img src="smileys/shock.gif"></img>';
    document.getElementByClass('bigsmile').innerHTML = '<img src="smileys/bigsmile.gif"></img>';
    document.getElementByClass('confused').innerHTML = '<img src="smileys/confused.gif"></img>';
    document.getElementByClass('sad').innerHTML = '<img src="smileys/sad.gif"></img>';
    document.getElementByClass('angry').innerHTML = '<img src="smileys/angry.gif"></img>';
    document.getElementByClass('clown').innerHTML = '<img src="smileys/clown.gif"></img>';
    document.getElementByClass('blush').innerHTML = '<img src="smileys/blush.gif"></img>';
    if(location.hash !="#");
    {
        location = "#";
        location.reload(true);
    }
    alert("A-OK");
});

So, when editing we can simply put <smiley class="happy"></smiley>. I know smiley isn't a real tag, but I didn't think it'd make a difference because I've seen "faketags" before. I tried changing the smiley tag to <div class="happy"></div> but that didn't work either. At the end of the script, I put a refresh function.

Anyways, the script wasn't working. It's being called, but not working. So I ran it through Firebug. Firebug gave the following message:

SyntaxError: missing ) after argument list
[Break On This Error]   
(22 out of range 21)

I then looked at the script, and well, all of the ) seem to be there. Not only that, but the smileys prior to line 22 aren't working either.

Anyways. Any ideas why: 1) The Smileys aren't appearing? 2) The script isn't being fully executed?

Answer 1

In the script you linked to, line #19:

if(location.hash !="#");{

That semi-colon shouldn't be there. (btw, the lines inside the if block should be indented)

Furthermore, there is no such a thing as document.getElementsByClass, only document.getElementsByClassName, and that returns a NodeList and not a single element (so changing its innerHTML won't do much.)

Other notes:

• In your website, you are including css/stylesheet.css twice (lines #4 and #12), and actually 3 times, if you count the one inside the iframe.

• The jquery version you're using is incredibly outdated, and the inclusion of jquery is hardly justified in this case - you're just using it to do a $(document).ready, which can be done without jquery if you ether stick a (semi-close) window.onload listener, or just put the script close to the </body>

• As said in the comments, and I couldn't agree more, don't just stick images inside those elements. Add an appropriate CSS class, and let CSS handle it.

Answer 2

Sometimes javascript errors are a bit misleading, but at least one syntax error can be spotted in your code:

 if(location.hash !="#");{

has an extra ;. Maybe that's the reason.

Btw, since you're using jQuery anyway, why not use it for element selection and html content setting?