I want to create a feature where a single line of text in a <textarea> is highlighted with a time delay. Can I also choose different colors for the highlight? My goal is to have each line turn blue when clicking on individual buttons sequentially. For example, clicking the first button highlights the first line in blue, then clicking the second button highlights the second line after a 1-second delay, and finally, clicking the third button highlights the third line in yellow after a 2-second delay. I've encountered a bug where if I click the button three times quickly, the highlight doesn't work properly, but that's not a major concern for me right now. I just need help implementing the time delay and color change. Thank you!
$( document ).ready(function() {
var str = 'line 1\nline 2\nline 3\n';
var textNumChar = str.length;
$('#str').val(str);
startPosition = 0;
$(".lines").click(function() {
var tarea = document.getElementById('str');
for(i=startPosition;i<textNumChar;i++)
{
if(str[i]=='\n') {
endposition = i;
break;
}
}
tarea.selectionStart = startPosition;
tarea.selectionEnd = endposition;
startPosition = endposition+1;
});
});#container {
float: left;
}
button {
width: 50px;height: 30px;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<div id="container">
<button class="lines" id="line1">line 1</button>
<br>
<button class="lines" id="line2">line 2</button>
<br>
<button class="lines" id="line3">line 3</button>
</div>
<textarea id="str" rows="6"></textarea>