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