1

我正在尝试操作 div 中已经存在的文本并将其替换为 JavaScript 中的另一个字符串，通过替换 div 元素中存在的字符串中的特定字符来创建基本的动画效果，更准确地说是基于位置的字符串替换。但是，当我写下以下代码时，它不起作用。我想要做的是将原始文本存储在一个变量中，当文本的 dom 替换发生时，然后设置一定的间隔替换为旧文本，并再次替换为新的随机文本，在文本的某个位置创建文本替换动画。

代码 ：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var all ="ABCDEFGHIJKLMNOPQRSTUVWXYZa{}[];:></?bcdefghijklmnopqrstuvwxyz0123+_)(*&^%$#@!~`456789";
var old_text = document.getElementById("text").innerText;

function randChar() {
    "use strict";
    return all.charAt(Math.floor(Math.random()*all.length));   
}
function main() {
    "use strict";
    var $_inter = setInterval(function() {

        var text = document.getElementById("text");

        text.innerHTML = text.innerHTML.substring(0, 5) + randChar() + text.innerHTML.substring(5);
        setTimeout(function(){
            text.innerHTML = old_text;
        },200);
    }, 350);
}
window.onload = main;
</script>
</head>
<body>
<div id="text">Hello World!</div>
</body>
</html>

所以为了让它工作一段时间，我使用原始字符串作为

setTimeout(function(){
            text.innerHTML = "Hello World!";
        },200);

这是不可能的，因为页面中的文本可能是动态生成的。当我运行第一个代码时，它显示了 Null 的 innerText。

它抛出的确切错误是：

未捕获的类型错误：无法读取 null 的属性“innerText”

这是什么意思，因为有文本和元素，为什么它不能从 dom 中获取文本？

4

2 回答 2

5

无法读取 null 的属性“innerText”

你的问题是有原因的，因为你#text在它被定义之前就得到了。

var old_text = document.getElementById("text").innerText;

您应该将其包含在您的window.onload函数中，因为它将存在。

未捕获的 ReferenceError：未定义标志

一旦你这样做，你会收到另一个错误：

未捕获的 ReferenceError：未定义标志

对于线路：

flag = flag+1;

这是因为你还没有定义你的标志变量，这可以通过var flag;在你的第一个顶部定义来解决。

演示

jsFiddle

var all ="ABCDEFGHIJKLMNOPQRSTUVWXYZa{}[];:></?bcdefghijklmnopqrstuvwxyz0123+_)(*&^%$#@!~`456789";
var old_text;
var flag = 0;

function randChar() {
    "use strict";
    return all.charAt(Math.floor(Math.random()*all.length));   
}
function main() {
    "use strict";
    old_text = document.getElementById("text").innerText;
    var counter = Math.floor(Math.random()*document.getElementById("text").innerText.length);
    var $_inter = setInterval(function() {

        var text = document.getElementById("text");

        text.innerHTML = text.innerHTML.substring(0, 5) + randChar() + text.innerHTML.substring(5);
        setTimeout(function(){
            text.innerHTML = old_text;
        },200);
        flag = flag+1;
    }, 350);
}
window.onload = main;

火狐浏览器中的错误

使用上面的代码，我们仍然会在 Firefox 中收到原始错误。这是因为Firefox 没有实现 innerText。这可以通过使用.textContent或来解决.innerHTML。

jsFiddle

old_text = document.getElementById("text").textContent;
var counter = Math.floor(Math.random()*document.getElementById("text").textContent.length);
// or
old_text = document.getElementById("text").innerHTML;
var counter = Math.floor(Math.random()*document.getElementById("text").innerHTML.length);
于 2013-03-31T06:59:55.617 回答
1 
var all ="ABCDEFGHIJKLMNOPQRSTUVWXYZa{}[];:></?bcdefghijklmnopqrstuvwxyz0123+_)(*&^%$#@!~`456789";
var old_text;

function randChar() {
    "use strict";
    return all.charAt(Math.floor(Math.random()*all.length));   
}
function main() {
    "use strict";
    old_text = document.getElementById("text").innerText;
    var $_inter = setInterval(function() {
        var text = document.getElementById("text");
        text.innerHTML = text.innerHTML.substring(0, 5) + randChar() + text.innerHTML.substring(5);
        setTimeout(function(){
            text.innerHTML = old_text;
        },200);
    }, 350);
}
window.onload = main;

只需摆脱flagand counter。old_text在onload监听器中初始化。

于 2013-03-31T07:10:26.417 回答