Experiencing difficulty creating a realistic typing effect with JavaScript that would accurately simulate typing errors

Question

Experiencing difficulty creating a realistic typing effect with JavaScript that would accurately simulate typing errors

I condensed everything into a single HTML file for easier testing of this specific section.

The objective is to initially type Wx, then delete the x, pause for a second, and finally type elcome.

Currently, the output is Wlcome. I have attempted various methods but am unable to achieve typing the entire Welcome without missing the initial e.

Any assistance would be greatly appreciated.

const element = document.querySelector('#typing-area');

let textToType = 'Welcome';
const delayTime = 1000;


const typingSpeed = 100;
let currentIndex = 0;

function typeLetter() {
  const currentText = element.innerHTML;

  if (currentIndex === 1) {
    element.innerHTML += 'x';
    setTimeout(removeX, 1000);
  } else {

    element.innerHTML = currentText + textToType[currentIndex];

    currentIndex++;

    if (currentIndex < textToType.length) {
      setTimeout(typeLetter, typingSpeed);
    }
  }
}


function removeX() {
  const currentText = element.innerHTML;
  element.innerHTML = currentText.slice(0, -1);
  currentIndex = 2;
  setTimeout(typeLetter, typingSpeed);
}


setTimeout(typeLetter, 500);

#typing-area::after {
  content: '';
  display: inline-block;
  width: 0.1em;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Typing Example</title>

</head>

<body>
  <div id="typing-area"></div>

</body>

</html>

javascript

Answer 1

Answer №1

Make sure not to alter your currentIndex (= 2), simply include a flag indicating that you have already displayed an error message, allowing the next iteration to proceed normally:

const element = document.querySelector('#typing-area');

let textToType = 'Welcome';
const delayTime = 1000;


const typingSpeed = 100;
let currentIndex = 0;
let hasErrorTyped = false;

function typeLetter() {
  const currentText = element.innerHTML;

  if (currentIndex === 1 && !hasErrorTyped) {
    element.innerHTML += 'x';
    setTimeout(removeX, 1000);
    hasErrorTyped = true;
  } else {

    element.innerHTML = currentText + textToType[currentIndex];

    currentIndex++;

    if (currentIndex < textToType.length) {
      setTimeout(typeLetter, typingSpeed);
    }
  }
}


function removeX() {
  const currentText = element.innerHTML;
  element.innerHTML = currentText.slice(0, -1);
  setTimeout(typeLetter, typingSpeed);
}


setTimeout(typeLetter, 500);

#typing-area::after {
  content: '';
  display: inline-block;
  width: 0.1em;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Typing Example</title>

</head>

<body>
  <div id="typing-area"></div>

</body>

</html>

Answer 2

Make sure not to alter your currentIndex (= 2), simply include a flag indicating that you have already displayed an error message, allowing the next iteration to proceed normally:

const element = document.querySelector('#typing-area');

let textToType = 'Welcome';
const delayTime = 1000;


const typingSpeed = 100;
let currentIndex = 0;
let hasErrorTyped = false;

function typeLetter() {
  const currentText = element.innerHTML;

  if (currentIndex === 1 && !hasErrorTyped) {
    element.innerHTML += 'x';
    setTimeout(removeX, 1000);
    hasErrorTyped = true;
  } else {

    element.innerHTML = currentText + textToType[currentIndex];

    currentIndex++;

    if (currentIndex < textToType.length) {
      setTimeout(typeLetter, typingSpeed);
    }
  }
}


function removeX() {
  const currentText = element.innerHTML;
  element.innerHTML = currentText.slice(0, -1);
  setTimeout(typeLetter, typingSpeed);
}


setTimeout(typeLetter, 500);

#typing-area::after {
  content: '';
  display: inline-block;
  width: 0.1em;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Typing Example</title>

</head>

<body>
  <div id="typing-area"></div>

</body>

</html>

Answer 3

Answer №2

I have enhanced your code by implementing promises for better clarity

const element = document.querySelector('#typing-area');

const typingSpeed = 100;

type()

async function type() {
  await wait(500)
  await typeLetters('Wx')
  await wait(1000)
  await removeLetters(1)
  await typeLetters('elcome')
}

function wait(ms) {
  return new Promise(r => setTimeout(r, ms))
}

async function typeLetters(letters) {
  for (const char of letters) {
    element.textContent += char
    await wait(typingSpeed)
  }
}

async function removeLetters(count) {
  for (let i = 0; i < count; i += 1) {
    element.textContent = element.textContent.slice(0, -1)
    await wait(typingSpeed)
  }
}

#typing-area::after {
  content: '';
  display: inline-block;
  width: 0.1em;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Typing Example</title>

</head>

<body>
  <div id="typing-area"></div>

</body>

</html>

Answer 4

I have enhanced your code by implementing promises for better clarity

const element = document.querySelector('#typing-area');

const typingSpeed = 100;

type()

async function type() {
  await wait(500)
  await typeLetters('Wx')
  await wait(1000)
  await removeLetters(1)
  await typeLetters('elcome')
}

function wait(ms) {
  return new Promise(r => setTimeout(r, ms))
}

async function typeLetters(letters) {
  for (const char of letters) {
    element.textContent += char
    await wait(typingSpeed)
  }
}

async function removeLetters(count) {
  for (let i = 0; i < count; i += 1) {
    element.textContent = element.textContent.slice(0, -1)
    await wait(typingSpeed)
  }
}

#typing-area::after {
  content: '';
  display: inline-block;
  width: 0.1em;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Typing Example</title>

</head>

<body>
  <div id="typing-area"></div>

</body>

</html>

Answer 5

Answer №3

If you've noticed the issue of always checking if the currentIndex === 1, then you're on the right track. The problem lies in constantly replacing the e with an x, causing it to repeat every time. Your solution of manually setting the index to 2 resulted in skipping the letter after the initial e. Remember, indexes start at 0!

0 - W
1 - e
2 - l
3 - c
5 - o
6 - m
7 - e

By enforcing the index to be 2, you skipped past the letter following the first e.

To address this issue, I've implemented a form of "state tracking" using a boolean called hasTypedError. This ensures that the code branch typing the x only executes the first time. Additionally, the currentIndex++ has been moved outside the if statement to allow for incrementing in both scenarios. Moreover, the manual index reset in the removeX function has been fixed to reset to the correct index.

const element = document.querySelector('#typing-area');

let textToType = 'Welcome';
const delayTime = 1000;

const typingSpeed = 100;
let currentIndex = 0;
let hasTypedError = false;

function typeLetter() {
  const currentText = element.innerHTML;

  if (currentIndex === 1 && !hasTypedError) {
    element.innerHTML += 'x';
    hasTypedError = true;
    setTimeout(removeX, 1000);
  } else {

    element.innerHTML = currentText + textToType[currentIndex];

    if (currentIndex < textToType.length - 1 ) {
      setTimeout(typeLetter, typingSpeed);
    }
  }
  currentIndex++;
  
  console.log('type', currentIndex, element.innerHTML)
}


function removeX() {
  const currentText = element.innerHTML;
  element.innerHTML = currentText.slice(0, -1);
  currentIndex = 1
  setTimeout(typeLetter, typingSpeed);
  
  console.log('remove', currentIndex, element.innerHTML)
}

//Start it all off
setTimeout(typeLetter, 500);

#typing-area::after {
  content: '';
  display: inline-block;
  width: 0.1em;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Typing Example</title>

</head>

<body>
  <div id="typing-area"></div>

</body>

</html>

Answer 6

If you've noticed the issue of always checking if the currentIndex === 1, then you're on the right track. The problem lies in constantly replacing the e with an x, causing it to repeat every time. Your solution of manually setting the index to 2 resulted in skipping the letter after the initial e. Remember, indexes start at 0!

0 - W
1 - e
2 - l
3 - c
5 - o
6 - m
7 - e

By enforcing the index to be 2, you skipped past the letter following the first e.

To address this issue, I've implemented a form of "state tracking" using a boolean called hasTypedError. This ensures that the code branch typing the x only executes the first time. Additionally, the currentIndex++ has been moved outside the if statement to allow for incrementing in both scenarios. Moreover, the manual index reset in the removeX function has been fixed to reset to the correct index.

const element = document.querySelector('#typing-area');

let textToType = 'Welcome';
const delayTime = 1000;

const typingSpeed = 100;
let currentIndex = 0;
let hasTypedError = false;

function typeLetter() {
  const currentText = element.innerHTML;

  if (currentIndex === 1 && !hasTypedError) {
    element.innerHTML += 'x';
    hasTypedError = true;
    setTimeout(removeX, 1000);
  } else {

    element.innerHTML = currentText + textToType[currentIndex];

    if (currentIndex < textToType.length - 1 ) {
      setTimeout(typeLetter, typingSpeed);
    }
  }
  currentIndex++;
  
  console.log('type', currentIndex, element.innerHTML)
}


function removeX() {
  const currentText = element.innerHTML;
  element.innerHTML = currentText.slice(0, -1);
  currentIndex = 1
  setTimeout(typeLetter, typingSpeed);
  
  console.log('remove', currentIndex, element.innerHTML)
}

//Start it all off
setTimeout(typeLetter, 500);

#typing-area::after {
  content: '';
  display: inline-block;
  width: 0.1em;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Typing Example</title>

</head>

<body>
  <div id="typing-area"></div>

</body>

</html>

Experiencing difficulty creating a realistic typing effect with JavaScript that would accurately simulate typing errors

Answer №1

Answer №2

Answer №3

Similar questions

Ways to insert text at the start and end of JSON data in order to convert it into JSONP format

What is the technique for invoking methods of the Joi class without the need to instantiate an object?

Error message: NGINX combined with Express.js and socket.io, page not found

How does React retain and display the previous values even after they have been updated?

Exploring the differences between utilizing Node JS Express for server-side development and displaying console output to

Start the CSS3 animation in reverse right away

Exploring nested maps in JavaScript

Retrieve information from json, divide it, and transfer it to the chart for display

Generating variable names dynamically in JavaScript

validating if Object may be either 'null' or 'undefined'

Looping through color transitions upon hover using CSS

Execute a function once all images have finished loading

Oops! The angular app encountered an error: TypeError - it cannot read property '0' of undefined. Time to debug

Fill in the missing keys, values, and data within the JSON object

Organize the table data based on time

Updating dropdown values using another dropdown through AJAX in Node.js: A step-by-step guide

What is the reason why createServer() is often not recognized as a function?

What is the process for aligning rows with the selected option from the drop-down menu

How can I prevent a browser from allowing users to select an image tag?

Navigating through sibling elements can be accomplished by using various methods in