How I show value of an input inside a span tag in the form of typing effect?-CodePudding

When I click the write button, the value of input should be displayed inside span with id caption in the form of typing effect. But the speed of typing of any character should be 30ms. to this mean when displayed the first character, the second character displayed with a delay of 30ms And also to the end. displaying of text does with a delay of 30ms(the first setTimeout). I wrote the below code but it did not work. the output is in to form of numbers. how to fix it?

const caption = document.getElementById("caption");
const input = document.getElementById("user-caption");

function typing() {
  const input_array = input.value.split("");
  setTimeout(myfunction(), 30);

  function myfunction() {
    for (let i = 0; i < input_array.length; i  ) {
      caption.innerHTML  = setTimeout(function() {
        return input_array[i];
      }, 30);
    }
  }
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
  background-color: #505050;
}

.container {
  background-color: black;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
  gap: 8px;
  width: 680px;
  height: 360px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.console {
  margin: 0;
  color: #fff;
  font-size: 27px;
}

#cursor {
  display: inline-block;
  width: 16px;
  height: 4px;
  margin-bottom: -5px;
  margin-left: 5px;
  background-color: #fff;
  animation: cursorMotion 1s 0.5s ease infinite;
}

@keyframes cursorMotion {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.main {
  height: 80%;
  padding: 40px;
  padding-bottom: 0;
}

.footer {
  height: 20%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.footer button {
  height: 35px;
  min-width: 120px;
  font-family: inherit;
  cursor: pointer;
  font-size: 16px;
}

.footer input {
  height: 35px;
  width: 230px;
  font-family: inherit;
  padding: 10px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <link href="https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/dist/font-face.css" rel="stylesheet" type="text/css" />
  <title>تایپ کردن</title>
</head>

<body>
  <div >
    <main >
      <p >
        <span>C:\</span>
        <span id="caption"></span>
        <span id="cursor"></span>
      </p>
    </main>
    <footer >
      <input type="text" id="user-caption" placeholder="your text ..." />
      <button id="test-typing" onclick="typing()">write</button>
      <button id="test-erasing">eraser</button>
    </footer>
  </div>
  <script src="main.js"></script>
</body>

</html>

CodePudding user response：

const caption = document.getElementById("caption");
const input = document.getElementById("user-caption");

  function typing() {
    const input_array = input.value.split("");
    myfunction(input_array);

    function myfunction(input) {
      if (!input.length) return;
      const w = input.shift();
      caption.innerHTML  = w;

      setTimeout(() => myfunction(input), 30);
    }
  }

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
  background-color: #505050;
}

.container {
  background-color: black;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
  gap: 8px;
  width: 680px;
  height: 360px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.console {
  margin: 0;
  color: #fff;
  font-size: 27px;
}

#cursor {
  display: inline-block;
  width: 16px;
  height: 4px;
  margin-bottom: -5px;
  margin-left: 5px;
  background-color: #fff;
  animation: cursorMotion 1s 0.5s ease infinite;
}

@keyframes cursorMotion {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.main {
  height: 80%;
  padding: 40px;
  padding-bottom: 0;
}

.footer {
  height: 20%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.footer button {
  height: 35px;
  min-width: 120px;
  font-family: inherit;
  cursor: pointer;
  font-size: 16px;
}

.footer input {
  height: 35px;
  width: 230px;
  font-family: inherit;
  padding: 10px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <link href="https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/dist/font-face.css" rel="stylesheet" type="text/css" />
  <title>تایپ کردن</title>
</head>

<body>
  <div >
    <main >
      <p >
        <span>C:\</span>
        <span id="caption"></span>
        <span id="cursor"></span>
      </p>
    </main>
    <footer >
      <input type="text" id="user-caption" placeholder="your text ..." />
      <button id="test-typing" onclick="typing()">write</button>
      <button id="test-erasing">eraser</button>
    </footer>
  </div>
  <script src="main.js"></script>
</body>

</html>