Cascading style sheet

JavaScript Change Background Color on Click

In this tutorial, we are going to change the background color of a webpage to the one supplied by the user in the input field.

Let’s get Started!

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Change JavaScript Background Color on Click</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <style>
    .colorContainer {
      display:flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    </style>
  </head>
  <body>
    <div class="container d-flex justify-content-center colorContainer">
    <form>
    <input id="colorName" type="text" class="form-control-lg" placeholder="Enter color name or code" />
    <button type="button" id="btn" class="btn btn-primary btn-lg" >

Result:

See also

CSS Dropdown Menu

Share
Published by
codeflare

Recent Posts

ReferenceError vs. TypeError: What’s the Difference?

When debugging JavaScript, you’ll often encounter ReferenceError and TypeError. While both indicate something went wrong,…

2 days ago

document.querySelector() vs. getElementById(): Which is Faster?

When selecting DOM elements in JavaScript, two common methods are document.querySelector() and document.getElementById(). But which…

2 days ago

npm vs. Yarn: Which Package Manager Should You Use in 2025?

When starting a JavaScript project, one of the first decisions you’ll face is: Should I…

4 days ago

Why Learn Software Development? (And Where to Start)

Software development is one of the most valuable skills you can learn. From building websites…

1 week ago

JavaScript Multidimensional Arrays

In JavaScript, arrays are used to store multiple values in a single variable. While JavaScript…

2 weeks ago

What is Containerization

Containerization is a lightweight form of virtualization that packages an application and its dependencies into…

2 weeks ago