DEV Community

Cover image for 👨‍💻 Daily Code 49 | Change the Background Color with 🟨JavaScript
Gregor Schafroth
Gregor Schafroth

Posted on

👨‍💻 Daily Code 49 | Change the Background Color with 🟨JavaScript

#beginners #daily #javascript #html

Alright! Since I want to practice more JavaScript HTML manipulation I asked ChatGPT for an other exercise to do exactly that. Here is what I got, and below as always my attempt to solve it

Exercise: Change the Background Color with JavaScript

  1. HTML Setup: Create an HTML file with a <div> element. Give this <div> an id so you can easily target it with JavaScript. Inside the <div>, put some text like "Hello, world!"
  2. JavaScript Task: Write a JavaScript function that changes the background color of this <div> to a color of your choice.
  3. Triggering the Change: Attach a button to the HTML. When this button is clicked, it should execute your JavaScript function, changing the background color of the <div>.
  4. Extra Challenge: If you want to take it a step further, create a text input where you can type in a color, and upon clicking the button, the background color of the <div> changes to whatever color you typed in.

This exercise will help you understand how JavaScript can interact with HTML elements and respond to user events. Enjoy coding!

My Code

I think I start grasping this well now. The only thing is I didn’t know how to actually set a background color, so for two lines I had to ask ChatGPT for help.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exercise: Change the Background Color with JavaScript</title> </head> <body> <input id="js-input" placeholder="Color" type="text"> <button id="js-button">Change Background Color</button> <div id="js-div">[color]</div> <script> document.getElementById('js-button').onclick = function () { document.getElementById('js-div') /* ... I am not sure how to continue here */ } </script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

And below is the completed solution.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exercise: Change the Background Color with JavaScript</title> </head> <body> <input id="js-input" placeholder="Color" type="text"> <button id="js-button">Change Background Color</button> <div id="js-div">[color]</div> <script> document.getElementById('js-button').onclick = function () { let color = document.getElementById('js-input').value; document.getElementById('js-div').style.backgroundColor = color; } </script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

What I learned:

  • .value is what I need to use to extract a text from an input field
  • .style.backgroundColor is how to set the background color.

Looks like .style is the general way to manipulate 🟦CSS

Alright this was great. Will do a few more of these next!

Top comments (0)