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
– user3714582, Commented Apr 20, 2015 at 11:22
So to be clear the script is running after the load of the html. — Troels Johannesen
– Troels Johannesen, Commented Apr 20, 2015 at 11:22
@TroelsJohannesen try to check this answer stackoverflow.com/questions/8739605/… whether there is not your case one of the points — user3714582
– user3714582, Commented Apr 20, 2015 at 11:36

Mukesh Mohan · Accepted Answer · 2015-04-20 11:41:58Z

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.

Vikrant · Accepted Answer · 2015-04-20 11:40:04Z

0

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; }
}

answered Apr 20, 2015 at 11:40

Vikrant

5,05218 gold badges53 silver badges77 bronze badges

Collectives™ on Stack Overflow

Javascript Counter - Change InnerHtml

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related