JavaScript To Click A Button
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this article we will show you the solution of JavaScript to click a button, we will use the JavaScript function to click on a button. The syntax of functions in JavaScript is,
function name(parameter1, parameter2,......) {
// block of code
}
We will also set the background color by clicking on a button in JavaScript. The syntax is,
Element.style.CSSproperty = value ;
Step By Step Guide On JavaScript To Click A Button :-
Example 1
Let us see the code for the simplest example of JavaScript by clicking on a button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript to click a button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
body{
background-color: aliceblue;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> JavaScript to click a button </h3>
</center>
<input type="button" value="click" onclick="example()">
<script>
function example() {
document.write("WELCOME TO TALKERSCODE") ;
}
</script>
</body>
</html>
- writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
- The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
- The metadata for the HTML file is contained in the <head> tag, which is closed with the </head> tag.
- The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
- We'll use an external CSS file to style the HTML page.
- using <style> tag to add CSS
- create a <Center> tag the add a <h1> tag used to add a heading close it with </h1> tag and add a <h3> tag within it
- create an <input> tag with type of button and value of click. With a onclick function of example()
- To write JavaScript, create a <script> tag
- Now declare the function example and write a sentence inside of document.write()
- Lastly by clicking on the button , the text will be display on the HTML page
Example 2
In this example, we will change the background color of a HTML page by clicking on a button using JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript to click a button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
body{
background-color: aliceblue;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> JavaScript to click a button </h3>
</center>
<input type="button" value="change background-color" onclick="changeBackground()">
<script>
function changeBackground() {
document.body.style.background = "pink";
}
</script>
</body>
</html>
- writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
- The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
- The metadata for the HTML file is contained in the <head> tag, which is closed with the </head> tag.
- The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
- We'll use an external CSS file to style the HTML page.
- using <style> tag to add CSS
- create a <Center> tag the add a <h1> tag used to add a heading close it with </h1> tag and add a <h3> tag within it
- Create an <input> tag with the type of button and the value of changing the background color. With a onclick function
- To write JavaScript, create a <script> tag
- At first declare the function for changing the background color.
- Write Document.body.style.background and add a color
- At last, by clicking on the button, we can change the background color.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know How to click a button using JavaScript.
I hope this article on JavaScript to click a button helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
