In the dynamic world of web development, text cases play a crucial role. From formatting headings and labels to ensuring user input consistency, mastering text case manipulation is a vital skill. This blog guides you on converting text to uppercase and lowercase, empowering you to manipulate text cases like a pro.
You'll learn in this blog post:
- Change text to uppercase and lowercase.
- Change input field text to uppercase and lowercase.
Change text to UpperCase and LowerCase.
You can change the text to uppercase by the toUpperCase() method of javascript. And change the text to lowercase by the toLowerCase() method of javascript.
We create a function to change the text to uppercase and lowercase on a button click.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change text to uppercase and lowercase | maketechstuff.com</title>
</head>
<body>
<p class="text">Hello welcome to maketechstuff.com</p>
<br>
<span>Output:</span>
<!-- element to show output -->
<p class="output_text"></p>
<button type="button" class="uppercase_button">Change to Uppercase</button>
<button type="button" class="lowercase_button">Change to Lowercase</button>
</body>
</html>
JavaScript
let text = document.querySelector(".text");
let output_text = document.querySelector(".output_text");
let uppercase_button = document.querySelector(".uppercase_button");
let lowercase_button = document.querySelector(".lowercase_button");
uppercase_button.addEventListener("click", change_to_uppercase);
lowercase_button.addEventListener("click", change_to_lowercase);
// Function to change text to uppercase.
function change_to_uppercase() {
output_text.innerHTML = text.innerHTML.toUpperCase();
}
// Function to change text to lowercase.
function change_to_lowercase() {
output_text.innerHTML = text.innerHTML.toLowerCase();
}
Output:
Remember here I used text.innerHTML, you can also use text.innerText. Here's the text is variable in which the html element(with text class) stored with its value to change text case.
But if you want to change the case of input field value then you have to use value instead of innerText or innerHTML.
like this:
Change Text Case of Input Field.
Creating a function to change the text case of the input field to uppercase and lowercase on a button click.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change text to uppercase and lowercase | maketechstuff.com</title>
</head>
<body>
<input type="text" class="text" value="Hello welcome to maketechstuff.com" style="width: 300px;">
<br>
<br>
<button type="button" class="uppercase_button">Change to Uppercase</button>
<button type="button" class="lowercase_button">Change to Lowercase</button>
</body>
</html>
JavaScript
let text = document.querySelector(".text");
let uppercase_button = document.querySelector(".uppercase_button");
let lowercase_button = document.querySelector(".lowercase_button");
uppercase_button.addEventListener("click", change_to_uppercase);
lowercase_button.addEventListener("click", change_to_lowercase);
// Function to change text to uppercase.
function change_to_uppercase() {
text.value = text.value.toUpperCase();
}
// Function to change text to lowercase.
function change_to_lowercase() {
text.value = text.value.toLowerCase();
}
Output:
So that's how you can change the text case to uppercase and lowercase using javascript. If you have any query or suggestion, feel free to write in the comment section.
You may like:
- How to change text case uppercase or lowercase instantly on user input.
- How to convert text to title case using JavaScript.
- How to get the value of input field using JavaScript.
- How to empty the input field on click using JavaScript.
- How to make one input field value same as another input field value based on checkbox state.
Share your thoughts.