Replicate user's input as typing effect in Javascript

Question

I am trying to capture a sentence from a user's input and replicate it as a typing effect. I am using JavaScript to perform the task.

I am able to capture the input and display it with console.log(), but when I add the typing effect function, it doesn't seem to work.

My code are as follow. What's going wrong?

var getInput = document.getElementById("input");

getInput.onkeyup = function(e) {
  if (e.keyCode == 13) {
    var i = 0;
    var text = input.value;

    function typing() {
      if (i < text.length) {
        document.getElementById('output').innerHTML += text.charAt(i);
        i++;
        setTimeout(typeWriter, 200);
      }
    }
    e.currentTarget.value = "";
  }
}

<link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">

<div class="background"></div>
<div class="input"></div>
<div class="typing">
  <div class="input-group">
    <div class="form-group">
      <label for="text">Please Type Here:</label>
      <input type="text" class="form-control" id="input">
    </div>
  </div>
</div>
<div class="output" id="output">
</div>

If there is no boundation on using 3rd party library then it can reduce code and complexity. — Amit Kumar Gupta
– Amit Kumar Gupta, Commented Oct 3, 2018 at 14:48

31piy · Accepted Answer · 2018-05-03 16:19:57Z

2

You have defined the typing function, but haven't called it.

Plus, in the setTimeout, you've called typeWriter function which is undefined. You wanted calling typing instead:

var getInput = document.getElementById("input");

getInput.onkeyup = function(e) {
  if (e.keyCode == 13) {
    var i = 0;
    var text = input.value;

    function typing() {
      if (i < text.length) {
        document.getElementById('output').innerHTML += text.charAt(i);
        i++;
        setTimeout(typing, 200);
      }
    }
    
    typing();
    e.currentTarget.value = "";
  }
}

<div class="background"></div>
<div class="input"></div>
<div class="typing">
  <div class="input-group">
    <div class="form-group">
      <label for="text">Please Type Here:</label>
      <input type="text" class="form-control" id="input">
    </div>
  </div>
</div>
<div class="output" id="output">
</div>

answered May 3, 2018 at 16:19

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Corné Over a year ago

Thank you so much, that worked! I want to click up for answered, but I don't have enough reputation. But thanks for the help!

31piy Over a year ago

@Corné -- Glad that it helped. You can accept my answer though.

Kunal Mukherjee · Accepted Answer · 2018-05-03 16:29:45Z

0

You can use the keyup event in Javascript and listen to that event and update your DOM element on each keyboard stroke.

window.onload = function() {
  let myInputElement = document.querySelector(`#myInput`);

  if (myInputElement) {

    myInputElement.addEventListener('keyup', function(event) {
      let myTextElement = document.querySelector(`#myText`);
      myTextElement.innerText = myInputElement.value;
    });
  }
}

<html>

<head>
</head>

<body>
  <input id="myInput" />
  <br>
  <hr>
  <p id="myText"></p>
</body>

answered May 3, 2018 at 16:29

Kunal Mukherjee

5,8733 gold badges29 silver badges55 bronze badges

1 Comment

Corné Over a year ago

Thanks Kunal, this is very helpful. I appreciate the help.

Collectives™ on Stack Overflow

Replicate user's input as typing effect in Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related