I was playing with javascript and decided to make a theme changer, unfortunately when one clicks on a button to change the theme, nothing happens. I'm using an old browser that doesn't support "alert()" but I've been able to test and change theme elements before. Here is the code I made:
Code: <body id="body" style="background-color:black; color:white;">
<p id="themeChoice"></p>
<h4>Change Theme</h4>
<button style="background-color:black; color:white;" onclick="theme(1);return false;">White on Black</button>
<button style="background-color:white; color:black;" onclick="theme(2);return false;">Black on White</button>
<button style="background-color:blue; color:yellow;" onclick="theme(3);return false;">Yellow on Blue</button>
</body>
<script>
function theme(tc) {
document.getElementById('themeChoice').innerHTML=tc; //Debug purposes.
if (tc == 1) {
body.style.background-color='black';
body.sytle.color='white';
} else if (tc == 2) {
body.style.background-color='white';
body.style.color='black';
} else if (tc == 3) {
body.style.background-color='blue';
body.style.color='yellow';
} else {
output.innerHTML='Error: Invalid Theme!';
output.style.background-color='red';
output.style.color='white';
}
}
</script>
If anyone would be willing to see why this isn't working and tell me why, I'd be a happy camper.
Code: body.style.background-color='black';
This is a syntax error. It expands to ((body.style.background) - (color)) = 'black', and you can't assign to an rvalue like that.
I'd do this.Code: body.style['background-color'] = 'black';
The correct way to access that style in javascript is object.style.backgroundColor (styles that are hyphenated are camelCased.)
That's dumb.
(You can tell I don't do manual mucking about with these sorts of things.)
Obviously the correct way is to use jQuery, a la:
Code: $("body").css("background-color", "black");
KermMartian wrote:
Obviously the correct way is to use jQuery, a la:
Code: $("body").css("background-color", "black");
TheStorm wrote:
KermMartian wrote:
Obviously the correct way is to use jQuery, a la:
Code: $("body").css("background-color", "black");
kerm@beaker-25:~$ wget -O tmp "http://code.jquery.com/jquery-2.1.1.min.js"
--2014-05-23 11:35:04-- http://code.jquery.com/jquery-2.1.1.min.js
Length: 84245 (82K) [application/x-javascript]
Saving to: 'tmp'
2014-05-23 11:35:04 - 'tmp' saved [84245/84245]
KermMartian wrote:
TheStorm wrote:
KermMartian wrote:
Obviously the correct way is to use jQuery, a la:
Code: $("body").css("background-color", "black");
Kerm@beaker-25:~$ wget -O tmp "http://code.jquery.com/jquery-2.1.1.min.js"
--2014-05-23 11:35:04-- http://code.jquery.com/jquery-2.1.1.min.js
Length: 84245 (82K) [application/x-javascript]
Saving to: 'tmp'
2014-05-23 11:35:04 - 'tmp' saved [84245/84245]
Lots of people are anti-jquery for some reason. I suspect they also use emacs and have neckbeards.
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.
»
Go to Registration page
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
[/url]
