Geek Answers Handbook

The syntax is missing) when everything) seems to be there?

Ok, so I built this site. One of the pages is the news feed www.wenotelling.x10.mx/news/ The news page has a built-in news page in which the actual update takes place. All this is very good and good, and this web page seems to work. However, I had 2 questions.

  • The feed does not seem to have been updated when the pages load, but it loads when the page is refreshed.
  • I wanted to add emoticons.

So, I wrote some JScript to fix both of these problems at a time. Since the news feed is updated using an HTML page, and I did not want to look at the emoticon URL each 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 just put <smiley class="happy"></smiley> . I know that the emoticon is not a real tag, but I did not think that this would make a difference, because I had seen "faketags" before. I tried changing the emoticon tag to <div class="happy"></div> , but that didn't work either. At the end of the script, I put the update function.

In any case, the script did not work. This is called, but does not work. So I ran Firebug. Firebug gave the following message:

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

Then I looked at the script, and everything, everything) seems to be there. Not only this, but the emoticons before line 22 also do not work.

Anyway. Any ideas why: 1) Emoticons do not appear? 2) the script is not fully executed?

+4
source share
3 answers

In the script you're linked to, line # 19:

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

This half-bell should not be there. (btw, the lines inside the if block must be indented)

Also, there is no such thing as document.getElementsByClass , only document.getElementsByClassName , and this returns a NodeList, not a single element (so changing its innerHTML will not do much.)

Other notes:

  • On your website, you include css/stylesheet.css twice (lines # 4 and # 12) and actually 3 times if you think it is inside an iframe.

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

  • As stated in the comments, and I could not agree more, do not just insert images inside these elements. Add the appropriate CSS class and let the CSS handle it.

+5
source

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

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

has an extra ; . Perhaps the reason.

Btw, since you use jQuery anyway, why not use it to select elements and customize html content?

+5
source

A couple of things that you should fix immediately will be a call to a nonexistent method and an inactive semicolon. The first is your call to getElementByClass , which is singular, not multiple. And secondly, you have a semicolon here: if(location.hash !="#"); .

Since you are using jQuery, I would advise you to avoid inline methods like getElementsByClass , as this does not exist in some older browsers. Instead, try something like this:

 var emoticons = ["happy","star","dead","yawn"]; $(document).ready(function () { $.each(emoticons, function (index, value) { $("<img>", {src: "smileys/" + value + ".gif"}).appendTo("." + value); }); });​

Pay attention to how we do not repeat again and again for each emoticon. I would advise you to take a look at sprites, since they usually work much better than solving such problems. But this is the next day.

Demo: http://jsfiddle.net/yRSF9/

0
source

More articles:


All Articles