多行的Javascript打字机效果

我发现了一个很好的工具，当你点击按钮时，它可以打印文本，而且效果很好。但是，如果我想创建多个按钮，用这个脚本打印不同的文本，它就是不起作用

Javascript:

<script>
var i = 0;
var txt = 'Text goes here';


var speed = 20;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("txt").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

</script>

var i=0；
var txt='文本在此显示'；
无功转速=20；
功能打字机（）{
如果（i

HTML:

您需要修改函数，使其看起来更像这样（基本上，所有全局函数都应该是函数的参数）

因此，您还需要稍微更改函数调用-请参阅下面的代码段

功能打字机（messageToShow，targetElement，timeBetween，currentPos=0）{
如果（当前位置

点击我
点击我两下

我提供了一种更灵活的方法：

首先，创建一个字符串数组，您希望它以打字机效果出现：

const texts = ['abcdefghijklmnopqrstuvwxyz', '1234567890`-=[]#&;./,\!"£$'];

您可以在上面看到，数组中有两个字符串。下一个循环在字符串上。我通过调用数组的

forEach

方法实现了这一点：

texts.forEach(text =>
{
  //work happens here
});

因此，对于每个字符串，创建一个

div

，其中包含一个

a

，用于单击，以及一个

p

用于写入

  const div = document.createElement('div');
  const a = document.createElement('a');
  a.setAttribute('href', '#');
  a.innerHTML = 'Type writer go!';
  div.appendChild(a);
  let p = document.createElement('p');
  div.appendChild(p);
  document.body.appendChild(div);

然后为

a

添加一个单击侦听器，这将启动打字机效果

  a.addEventListener('click', function(e)
  {
    e.preventDefault();
    nextUpdate(p, 0, text);
  });

如您所见，单击处理程序调用名为

nextUpdate

的函数。此函数用于设置

p

的当前文本，并设置下次更新的超时时间

function nextUpdate(p, index, text)
{
  p.innerHTML = text.substr(0, index);

  if(index < text.length)
  {
    setTimeout(nextUpdate, speed, p, index+1, text);
  }
}

---

你发布的代码中只有一个按钮..？糟糕，我只发布了一段代码。在尝试创建两个时，我只是复制了代码，除了每个代码之外，我确保变量“txt”、id和函数名“typeWriter”的名称都不同。我基本上只发布了一段代码，因为我不知道如何编写它以使两段代码同时工作。不完全确定必须定义一个常量字符串数组如何使其“更灵活”，但它确实工作。。。

function nextUpdate(p, index, text)
{
  p.innerHTML = text.substr(0, index);

  if(index < text.length)
  {
    setTimeout(nextUpdate, speed, p, index+1, text);
  }
}