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">
    <meta charset="utf-8">
    <title>Change JavaScript Background Color on Click</title>
    <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    .colorContainer {
      flex-direction: row;
      justify-content: center;
      align-items: center;
    <div class="container d-flex justify-content-center colorContainer">
    <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" onclick="changeColor()">Change Color</button>

   let colorName = document.getElementById("colorName");
   let btn = document.getElementById("btn");

   function changeColor() { = colorName.value;




See also

CSS Dropdown Menu

Leave a Reply

Your email address will not be published. Required fields are marked *