By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,052 Members | 1,456 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,052 IT Pros & Developers. It's quick & easy.

Can't figure out where my mistake is. I want the two texts to turn blue and yellow.

P: 2
Expand|Select|Wrap|Line Numbers
  1. <style>
  2.  
  3. .blueback {
  4.   background-color="lightblue";
  5.  
  6. }
  7. .yellowback {
  8.   background-color="yellow";
  9.  
  10. }
  11.  
  12. </style>
  13.  
  14. <h1>
  15.   Change CSS Classes
  16.  
  17. </h1>
  18. <div id="d1">Hello</div>
  19. </br>
  20. <div id="d2">GoodBye</div>
  21. </br>
  22. <p>
  23. <input type="button" value="Change Color!" onclick="colorchange()">
  24. </p>
  25.  
  26.  
  27. <script>
  28.  
  29. function colorchange() {
  30.  
  31.   var dd1=document.getElementById(d1);
  32.   var dd2=document.getElementById(d2);
  33.  
  34.   dd1.className ="blueback";
  35.   dd2.className ="yellowback";
  36.  
  37.  
  38.  
  39. </script>
Reply·Email·View Thread | Edit·Delete
2 Weeks Ago #1
Share this Question
Share on Google+
1 Reply


gits
Expert Mod 5K+
P: 5,330
there are several issues in that code:

1. css properties are assigned like the following:

Expand|Select|Wrap|Line Numbers
  1. propertyName: value
2. getElementById takes a string as argument

3. function body needs to be closed

use the browser's developer tools to check the errors and fix them.
2 Weeks Ago #2

Post your reply

Sign in to post your reply or Sign up for a free account.