Question

我正在尝试操作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。

它抛出的确切错误是：

未捕获的TypeError：无法读取null的

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

Answer 1

无法读取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中收到原始错误。这是因为Firefox doesn't implement 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);

Answer 2

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;

摆脱flag和counter。在old_text侦听器中初始化onload。

在Javascript中操作HTML

2 个答案:

无法读取null

未捕获的ReferenceError：未定义标志

演示

Firefox中的错误