{"id":925,"date":"2022-06-24T03:52:26","date_gmt":"2022-06-24T02:52:26","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=925"},"modified":"2022-06-24T03:52:28","modified_gmt":"2022-06-24T02:52:28","slug":"javascript-change-background-color-on-click","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/javascript-change-background-color-on-click\/","title":{"rendered":"JavaScript Change Background Color on Click"},"content":{"rendered":"\n
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.<\/p>\n\n\n\n
Let’s get Started!<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n <head>\n <meta charset=\"utf-8\">\n <title>Change JavaScript Background Color on Click<\/title>\n <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\">\n <style>\n .colorContainer {\n display:flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n }\n <\/style>\n <\/head>\n <body>\n <div class=\"container d-flex justify-content-center colorContainer\">\n <form>\n <input id=\"colorName\" type=\"text\" class=\"form-control-lg\" placeholder=\"Enter color name or code\" \/>\n <button type=\"button\" id=\"btn\" class=\"btn btn-primary btn-lg\" onclick=\"changeColor()\">Change Color<\/button>\n <\/form>\n <\/div>\n\n\n <script>\n let colorName = document.getElementById(\"colorName\");\n let btn = document.getElementById(\"btn\");\n\n function changeColor() {\n document.body.style.backgroundColor = colorName.value;\n }\n\n <\/script>\n\n <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n