为什么这个文本效果不起作用？答案

【问题标题】：Why is this text effect not working?为什么这个文本效果不起作用？
【发布时间】：2010-07-18 16:15:04
【问题描述】：

我正在尝试修改 here 中的脚本以处理不止一个跨度。

我已经尝试过了，但它似乎用相同的文本覆盖了两个跨度。

<html>
<head>
<script>
var got;
var chars;

function change(decSpan,encSpan)
{
   var randstring = "";
   var rslength = chars.length - got.length;

   var decrypted = document.getElementById(decSpan);
   var encrypted = document.getElementById(encSpan);

   for(var x=0;x<rslength;x++)
   {
       i = Math.floor(Math.random() * chars.length);
       randstring += chars.charAt(i);
   }

   if(randstring.charAt(0) == chars.charAt(got.length))
   {
      got += randstring.charAt(0);
      decrypted.innerHTML = got;
   }
   else
   {
      encrypted.innerHTML = randstring;
   }

   if(chars.length > got.length)
   {
  setTimeout("change('"+decSpan+"','"+encSpan+"')", 10);
   }
   else
   {
      encrypted.innerHTML = "";
   }
}
function startdecrypt()
{
   var decodeSpans = ["decoded","decoded2"];
   var encodeSpans = ["encoded","encoded2"];
   for(var z in decodeSpans) 
   {
decSpan = decodeSpans[z];
encSpan = encodeSpans[z];
    var decrypted = document.getElementById(decSpan);
    var encrypted = document.getElementById(encSpan);

    chars = decrypted.innerHTML;
    decrypted.innerHTML = "";
    got = "";
    setTimeout("change('"+decSpan+"','"+encSpan+"')", 10);
   }
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<input type="button" value="go" onClick="javascript:startdecrypt()"><br>
<span id="decoded">Test1</span><span id="encoded"></span><br>
<span id="decoded2">Test2</span><span id="encoded2"></span>
</body>
</html>

【问题讨论】：

当按钮被点击时，文本随机变化，但仍然使用原始文本中的所有字符。如果这是你想要的，它对我有用。 “不工作”是什么意思？

标签： javascript

【解决方案1】：

问题在于该脚本使用全局 javascript 变量：chars 和 got 在 startdecrypt 中设置，稍后在 change 函数中使用。因此，循环的下一次迭代会覆盖之前设置的值。

最好的解决方案可能是将它们包含在 change 函数的 js 调用中，就像使用 ids 一样。

另外，请确保将所有 js 变量声明为本地以避免此类副作用：var got = ""。

【讨论】：

【解决方案2】：

我承认没有浏览过你的整个代码，但你似乎做了一个意外的 Javascript 闭包，就像在这个例子中一样：

Javascript closures - variable scope question

或者，正如 Nikita 所说，全局变量，当在 change() 函数中引用时，会产生一个闭包。请注意，for 中的 var 不会改变任何内容。 Javascript 没有块作用域。

请注意，在循环内使用 var 或在函数顶部声明 var x 具有相同的效果。您可能要考虑改用let：

Let statemennt from Mozilla Developper

闭包很难理解，尤其是无意识的闭包。安德对上述链接的回答提供了有关它们如何工作的有用链接。

【讨论】：

【解决方案3】：

如果我理解正确，这应该做你正在寻找的：

var decodeSpans = ["decoded", "decoded2"];
var encodeSpans = ["encoded","encoded2"];

function encoder(decSpan, encSpan){
    this.encSpan = encSpan;
    this.decSpan = decSpan;
    var got = "";
    var chars = decSpan.innerHTML;
    decSpan.innerHTML = "";
    return (function(){
        var randstring = "";
        var rslength = chars.length - got.length;

        for(var x=0;x<rslength;x++){
            i = Math.floor(Math.random() * chars.length);
            randstring += chars.charAt(i);
        }

        if(randstring.charAt(0) == chars.charAt(got.length)){
            got += randstring.charAt(0);
            decSpan.innerHTML = got;
        }else{
            encSpan.innerHTML = randstring;
        }

        if(chars.length > got.length){
            decSpan.innerHTML = chars;
            encSpan.innerHTML = "";
        }else{
            encSpan.innerHTML = "";
        }
    })();
}

function startdecrypt(){
    for(var z = 0; z < decodeSpans.length; z++){
        decSpan = decodeSpans[z];
        encSpan = encodeSpans[z];
        var decrypted = document.getElementById(decSpan);
        var encrypted = document.getElementById(encSpan);
        encoder(decrypted, encrypted);
    }
}

我只是在 2 晚前正确阅读了关于关闭的内容，因此仍在尝试将其全部放在上下文中，因此欢迎了解这些事情的人对此解决方案提供一些（建设性的）反馈 :)

【讨论】：