Creating Radio Buttons to change background color

Learn How to change the background color of a webpage using radio buttons.

Hey Folks,
In this tutorial, we will learn how to put colors in the background of your web page by using the onClick function.

JavaScript commonly abbreviated as JS. It is well-known as the scripting language for Web pages. It is also known as an Interpreted programming language.

You might be thinking why am I telling it to you because I want to show you the magic of this language.

Change background color of a webpage using radio buttons

So let’s get started. Creating any web page code is basically divided into two parts. One is the script part and the other is form part. The script is the part where you write your mathematical code like back end which doesn’t get displayed on web page. Whereas form is like the front end which gets displayed.
Stop for a minute and think can this program be written without script tag?

Yes, you are right it can be done without writing script tag.

So the logic behind the program is very simple. We begin with creating three radio buttons named red, green, blue inside the form tag and use attribute named onClick and assign value document.bgcolor=color name to it.

<html>
<head>
<title>
Change background color
</title>
</head>
<body>
<form>
Red			
<input type="radio" onClick="document.bgColor='red' " name="r">
<br>
Green
<input type="radio" onClick="document.bgColor='green'" name="r">
<br>
Blue
<input type="radio" onClick="document.bgColor='blue'" name="r">
<br>
</form>
<body>
<html>

Now you might be wondering, why I used OnClick attribute. Basically onClick is a function which gives instruction to the computer to perform a function inside it when the user clicks a button, in this case, its radio button.



document.bgColor='red'

The above property sets background color of the current document as red. You must be remembering like we write ‘document.write=value’ to print a value on the screen. The above statement is a very important statement you must remember this.

You may also read,

Leave a Reply

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