In this article, we will learn about, how we can change button text on click, in jquery. I will show you step by step how we can change button text on click.
We will use html method to change button text on click. This kind of thing we need during the development of certain application.
To do this we will follow the below step
- Create a html file
- Write the code
- Test the Code
Step: 1 Create a html file
we will create a html file under the htdocs folder.Before the creating the html file. Let’s create a folder named as learn-javascript under that folder create file named as index.html
Step: 2 Write the code
Now open your index.html file in your favorite text editor or IDE, I am using visual studio code for that, you can also do it in notepad or notepad++
Write the below code in your index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-primary btn-click">Hello CodeHunger</button>
<script>
$(document).on('click','.btn-click',function(){
$('.btn-click').html('hurray');
});
</script>
</body>
</html>
Step:3 Test the code
Now we will test our code, go to browser and in the address bar enter the url http://localhost/learn-javascript/, once you hit enter something like below will be open.
When you click on the button the text will be changed
Read Also: How to get value of selected option
I hope you understand the basic concept of changing the button text on click
