用Javascript处理HTML

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的属性'innerText'

这是什么意思，因为那里有文本和元素，为什么它不能从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没有实现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 。 在onload侦听器中初始化old_text 。

用Javascript处理HTML

问题描述

2 个解决方案

解决方案1
5 已采纳 2013-03-31 06:59:55

无法读取null的属性“ innerText”

未捕获的ReferenceError：未定义标志

演示版

Firefox中的错误

解决方案2
1 2013-03-31 07:10:26

用Javascript处理HTML

问题描述

2 个解决方案

解决方案1 5 已采纳 2013-03-31 06:59:55

无法读取null的属性“ innerText”

未捕获的ReferenceError：未定义标志

演示版

Firefox中的错误

解决方案2 1 2013-03-31 07:10:26

解决方案1
5 已采纳 2013-03-31 06:59:55

解决方案2
1 2013-03-31 07:10:26