Why isnt this javascript working?
Asked by
mirza (
5057
)
November 8th, 2007
This code runs perfectly when i test it on dreamweaver or just plain notepad. But when i paste these lines of code onto my tumblr theme, they dont work anymore. Any idea why??
<head>
<script language=“JavaScript”>
var backColor = new Array();
backColor[0] = ’#FF9900’;
backColor[1] = ’#6498cc’;
function changeBG(whichColor){
document.bgColor = backColor[whichColor];
}
</script></head>
<body>
<a href=“javascript:changeBG(0)”>Orange</a>
<a href=“javascript:changeBG(1)”>Blue</a>
</body>
Observing members:
0
Composing members:
0
10 Answers
in your body tag, try using something like <body style=“background-color:#XXXXXX”>.
Your javascript is inserting bgcolor and the color into the body tag, but i don’t see it changing without the inline style.
Just a quick guess.
This should fix it. You don’t have an onClick event in your link.
<a href=”#” onClick=“javascript:changeBG(0)”>Orange</a>
@glial: it didnt work – instead it just follows the link. If i remove the href tag then theres nothing to click on at all. You can see it live here with the orange and grey button.
Weird, I see it working on the code site. I can’t get it to work elsewhere either….Odd.
thanks for the help but the same thing happened with the WebCoding method – it works locally but not on tumblr.One would think that tumblr doesnt allow javascript but i am pretty sure it does because I used to have a javascript menu in tumblr plus I also have a tracking script on tumblr
@mirza, Here’s what to do:
1. Install Firefox if you don’t have it
2. Install the Firebug extension within Firefox
3. Open the Tumblr page and enable Firebug on the page
4. With Firebug open, click the “Script” tab
5. Choose the page or script where this script lives
6. Click on the line number beside document.bgColor = backColor[whichColor] (you should now see a big, red dot next to that line of code)
7. Click one of your links
You’ll either see a yellow arrow over the top of the big red dot or you won’t. If you do, then Tumblr allows JavaScript and your function is getting called (but has a syntax error or something). If you don’t, then either your links are written incorrectly or Tumblr doesn’t allow custom JavaScripts.
@seqdeha, i did the debugging with firefox and found a yellow arrow over the red dot—but i really dont see why there should be a syntax error
@mirza, it appears that you can’t set the background color this way when it’s set as an attribute in CSS on the body element. How I came to that conclusion was to get the script working without the CSS in place, then I added the CSS in and it stopped working. So, the next step was to find a way to access the body element’s style attributes.
The following is a bit of a hack, but it works. I feel like I should know a better way to do this, but I’m a little fuzzy at the moment.
NOTE: The following might not work in Tumblr if you can’t add an ID attribute to the body element.
<html>
<head>
<style type=“text/css”>
body {
color: #333333;
margin: 30px;
background-color: #6498cc;
font-family: ‘Lucida Grande’, Helvetica, sans-serif;
}
</style>
<script language="JavaScript">
var backColor = new Array();
backColor[0] = "#FF9900";
backColor[1] = "#6498cc";
function changeBG(whichColor) {
document.getElementById("bod").style.backgroundColor = backColor[whichColor];
}
</script></head>
<body id="bod">
<a href="#" onclick="changeBG(0);return false;">Orange</a>
<a href="#" onclick="changeBG(1);return false;">Blue</a>
</body>
</html>
thanks seqdeha but it’s still not working and i have decided to just give up this idea (also i am starting the doubt the functionality of changing the background).
With that said it is possible to change your background and other CSS element colors on tumblr. The best possible example would be http://gondaba.com/ which probably does the nicest job of changing backgrounds with primarily javascript with a PHP backend
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
