Question

我正在尝试从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>

Answer 1

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

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

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

Answer 2

我承认不会完成整个代码，但似乎你做了一个非预期的Javascript闭包，就像在这个例子中一样：

Javascript closures - variable scope question

或者，正如尼基塔所说的那样，全局变量在change()函数中引用时会产生闭包。请注意，var中的for不会改变任何内容。 Javascript没有块范围。

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

Let statemennt from Mozilla Developper

闭包难以理解，尤其是非预期的闭包。 Ender对上述链接的回答有助于他们如何运作。

Answer 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晚前的闭包上正确阅读，所以仍然试图将它全部放到上下文中，因此对于这些解决方案的一些（建设性的）反馈会受到那些了解这些事情的人的欢迎：）

为什么这个文字效果不起作用？

3 个答案: