JavaScript Chage Text Case Example

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Change Text Case Tutorial - TutsInsider</title>
</head>
<body>
<h2>JavaScript Change Text Case</h2>

<br>
<br>

<h3 id="javascript-introduction-output">JavaScript Has Wonderful Features!</h3>

<br>
<br>

<p>Click the Buttons Below to convert the text in Upper or Lower case.</p>
<button id="upper-case-button" style="padding: 2px 5px;">Uppercase</button>
<button id="lower-case-button" style="padding: 2px 5px;">Lowercase</button>

<script>
var output = document.getElementById("javascript-introduction-output");
var originalString = output.textContent;
var upperButton = document.getElementById("upper-case-button");
var lowerButton = document.getElementById("lower-case-button");
var index = 0;
var intervalId;

function upperCaseString() {
clearInterval(intervalId);
index = 0;
intervalId = setInterval(function() {
  if (index < originalString.length) {
    output.textContent = output.textContent.slice(0, index) + originalString[index].toUpperCase() + output.textContent.slice(index + 1);
    index++;
  } else {
    clearInterval(intervalId);
  }
}, 20);
}

function lowerCaseString() {
clearInterval(intervalId);
index = 0;
intervalId = setInterval(function() {
  if (index < originalString.length) {
    output.textContent = output.textContent.slice(0, index) + originalString[index].toLowerCase() + output.textContent.slice(index + 1);
    index++;
  } else {
    clearInterval(intervalId);
  }
}, 20);
}

upperButton.addEventListener("click", upperCaseString);
lowerButton.addEventListener("click", lowerCaseString);

//call lowercase function on pageload
lowerCaseString()
</script>

</body>
</html>