Change Button Text On Click using jquery

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.

change button text on click

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

0 0 votes
Article Rating

Do you want to hire us for your Project Work? Then Contact US.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x