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");
Yes because pulling in multi MB of JS just to change the background color seems reasonable. Razz
TheStorm wrote:
KermMartian wrote:
Obviously the correct way is to use jQuery, a la:
Code:
$("body").css("background-color", "black");
Yes because pulling in multi MB of JS just to change the background color seems reasonable. Razz
Multi-MB? What are you going on about?
Code:
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");
Yes because pulling in multi MB of JS just to change the background color seems reasonable. Razz
Multi-MB? What are you going on about?
Code:
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]
Ok fair enough, the min distribution is more reasonable, but still way larger than what would be needed for this project.
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
Page 1 of 1
» All times are UTC - 5 Hours
 
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

 

Advertisement