I want to develop a straightforward Javascript auto writer within an HTML page. Below is the code I have written:
<html>
<head>
<style>
#type {
display: inline-block;
}
#cur {
display: inline-block;
}
</style>
</head>
<body>
<pre>
<div id="type"></div><div id="cur">{cursor}</div>
</pre>
<script>
var string = "Write this string!\nNext Line!";
var array = string.split("");
var timer;
function looper() {
if (array.length > 0) {
document.getElementById("type").innerHTML += array.shift();
} else {
clearTimeout(looper);
}
timer = setTimeout('looper()', 50);
}
looper();
</script>
</body>
</html>The value of "{cursor}" denotes the cursor position, which will be created later. The issue encountered is that when moving to a new line, the cursor does not return to the initial position on the line but instead remains at the last position, causing a sudden "jump" to the next line.