Javascript Counter - Change InnerHtml

Question

Hello I'm trying to change a word after each 3 seconds.

The Script:

<script type="text/javascript">
    var text = ["Fysioterapeut", "Kiropraktor", "Praktiserende læge"];
    var counter = 0;
    var elem = document.getElementById("changeText");
    setInterval(change, 3000);
    function change() {
     elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { counter = 0; }
    }
</script>

The PHP/HTMl

$title =  "FIND DEN RIGTIGE <span id='changeText'>Fysioterapeut</span> i dag";

The console says elem is NULL ? Why is that?

The script is running clearly but the text is not changing. Anybody know why?

Is this script before element with id `changeText ` or after? It is possible that you are trying to access element before it is in the document. — user3714582, Apr 20 '15 at 11:22
So to be clear the script is running after the load of the html. — Troels Johannesen, Apr 20 '15 at 11:22
@TroelsJohannesen try to check this answer http://stackoverflow.com/questions/8739605/getelementbyid-returns-null#8739624 whether there is not your case one of the points — user3714582, Apr 20 '15 at 11:36

score 2 · Accepted Answer · answered Apr 20 '15 at 11:41

here here actually what happens is your java-script loads first, but at that time it checks for the html element and which will not be available at that time.

so the javascrpt code should be below the php code you have specified.

Lets the sample code should be as like below.

<html>
<head>

</head>
<body>

<?php 
echo "FIND DEN RIGTIGE <span id='changeText'>Fysioterapeut</span> i dag"; 
?>

<script type="text/javascript">
    var text = ["Fysioterapeut", "Kiropraktor", "Praktiserende læge"];
    var counter = 0;
    var elem = document.getElementById("changeText");
    setInterval(change, 1000);
    function change() {
     elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { counter = 0; }
    }
</script>

</body>
</html>

Now it will work . Because now the javascript can find the html elament.

score 0 · Answer 2 · answered Apr 20 '15 at 11:40

The text inside your span is not changing becuse, it is beging declared everytime when change() is being called!

Here is the Solution: WORKING DEMO

$( document ).ready(function() {
    setInterval(change, 3000);
});
var counter = 0;
function change() {
    var text = ["Fysioterapeut", "Kiropraktor", "Praktiserende læge"];
    var elem = document.getElementById("changeText");
    elem.innerHTML = text[counter];
    counter++;
    if(counter >= text.length) { counter = 0; }
}

Javascript Counter - Change InnerHtml

2 Answers2