By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
463,097 Members | 506 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 463,097 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: 5
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
Sep 30 '19 #1
Share this Question
Share on Google+
2 Replies

gits
Expert Mod 5K+
P: 5,390
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.
Oct 1 '19 #2

P: 66
Hi,

In Your code there are several code is missing:

In CSS property:value; //remove = and " "

Example:
Expand|Select|Wrap|Line Numbers
  1. background-color:lightblue; 
In Javascript,

In script tag add type="text/javascript" and complete } Brackets

You can also try this code:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Document</title>
  5. </head>
  6. <style>
  7.     .blueback {
  8.       background-color:lightblue;
  9.  
  10.     }
  11.     .yellowback {
  12.       background-color:yellow;
  13.     }
  14.     </style>
  15. <body>
  16.     <h1>
  17.         Change CSS Classes
  18.  
  19.       </h1>
  20.       <div id="d1">Hello</div>
  21.       </br>
  22.       <div id="d2">GoodBye</div>
  23.       </br>
  24.       <p>
  25.       <input type="button" value="Change Color!" onClick="colorchange()"/>
  26.       </p>
  27.  
  28.  
  29.       <script type="text/javascript">
  30.  
  31.       function colorchange() {
  32.           //You can use this syntax for calling css class
  33.         document.getElementById("d1").className ="blueback";
  34.         var dd2=document.getElementById("d2").className ="yellowback";
  35.  
  36.       }
  37.       </script>
  38.  
  39. </body>
  40. </html>
Jan 28 '20 #3

Post your reply

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