Manipulating HTML in Javascript

Question

I am trying to manipulate the text that is already inside the div and replace it with another strings from JavaScript, creating a basic animating effect by replacing particular character from strings present inside the div element, more precisely position based replacement of string. However when I wrote down the following code it doesn't work. What I wanted to do is that store the original text in one variable and when the dom replacement of text occurs then setting certain interval replace by the old text and again replace by the new randomize text creating text replacement animation in certain position of the text.

code :

<!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>

So in order to make it work for a while I used the original string as

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

Which is not possible as the text in page might have been generated dynamically. When I did run the first code it says innerText of Null.

The exact error it throws is:

Uncaught TypeError: Cannot read property 'innerText' of null

What does that mean, because text and element is there why can't it grab the text from dom?

shouldn't it be able to grab from the top declared old_text as every other variable can be accessed like the 'all' can be accessed from randChar() why old_text can't be ? — monk
– monk, Commented Mar 31, 2013 at 6:58
@sann sorry about that, i forgot to remove it, it not functional in this code, i will update it right now — monk
– monk, Commented Mar 31, 2013 at 7:06

Community · Accepted Answer · 2017-05-23 12:04:56Z

5

Cannot read property 'innerText' of null

Your problem is being cause because you're getting #text before it is defined.

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

You should include this in your window.onload function as it will exist then.

Uncaught ReferenceError: flag is not defined

Once you do that you will receiving another error:

Uncaught ReferenceError: flag is not defined

For the line:

flag = flag+1;

This is because you have not defined your flag variable, this can be fixed by defining var flag; at the top of your first.

Demo

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;

Error in Firefox

With the above code we're still receiving the original error in Firefox. This is because Firefox doesn't implement innerText. This can be fixed by using either .textContent or .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);

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Mar 31, 2013 at 6:59

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ejaz Over a year ago

this throws a TypeError: document.getElementById(...).innerText is undefined error on var counter = Math.floor(Math.random() * document.getElementById("text").innerText.length); in firefox 19.0.2 for me. If I replace innerText with innerHTML in said line, the output is "undef_ned" with "_" being replaced with random chars. Any thoughts?

monk Over a year ago

yes, i couldn't run it on firefox as well, but in chrome it works perfectly

Ejaz Over a year ago

Perfect. +1 for explanation.

ShuklaSannidhya · Accepted Answer · 2013-03-31 07:10:26Z

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;

Just get rid of flag and counter. Initialize old_text in the onload listener.

answered Mar 31, 2013 at 7:10

ShuklaSannidhya

9,0469 gold badges35 silver badges45 bronze badges

1 Comment

Ejaz Over a year ago

In firefox 19.0.2, the output is undef_ned with _ being replaced with random chars.

Collectives™ on Stack Overflow

Manipulating HTML in Javascript

2 Answers 2

Cannot read property 'innerText' of null

Uncaught ReferenceError: flag is not defined

Demo

Error in Firefox

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Cannot read property 'innerText' of null

Uncaught ReferenceError: flag is not defined

Demo

Error in Firefox

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related