Change button text with jQuery

Its essential to change t he button text in some applications . For example Like button. If the current is “Like”, after click on the button it the button text will be “Liked”

jquery makes process efficient.


<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

<button class="like-button">Like</button>

<script>
$(document).ready(function(){
    $('.like-button').click(function(){
        var buttonText = $(this).text();
        if (buttonText === 'Like') {
            $(this).text('Liked');
        } else {
            $(this).text('Like');
        }
    });
});
</script>

</body>
</html>

The same example without jquery


<!DOCTYPE html>
<html>
<head>
</head>

<body>
<button class="like-button" onclick="toggleLike(this)">Like</button>

<script>
function toggleLike(button) {
    if (button.textContent === 'Like') {
        button.textContent = 'Liked';
    } else {
        button.textContent = 'Like';
    }
}
</script>

</body>
</html>

Copy and run the html code directly here