CODEWITHSUNDEEP
javascripthtml
user2253722
user2253722

Reputation: 25

Javascript: Change HTML Text using an Array

Hi at the moment i have some Javascript that makes my image loop through automatically multiple images stored in a array, but how can i do the same thing with text on a H2 text object?

<SCRIPT LANGUAGE = "Javascript">
    var p1 = new Image();
    var p2 = new Image();
    var p3 = new Image();
    var p4 = new Image();

    p1.src="images/223.png";
    p2.src="images/335.png";
    p3.src="images/225.png";
    p4.src="images/226.png";

    var imgArray = new Array (p1, p2, p3, p4);

    var counter = 0;
    var loop = 1;
    setTimeout(scroll_forwards, 2000);

    var end = imgArray.length - 1;

    function scroll_forwards() {
        if (counter == end){
            counter = 0;    
        }
        else {
            counter++;
        }
        document.pic1.src = imgArray[counter].src;
        setTimeout(scroll_forwards, 2000);
    }
</SCRIPT>

Upvotes: 0

Views: 1921

Answers (2)

user2253722
user2253722

Reputation: 25

I don't know why it wasn't working when i attempted it last night but i just re-did the Javascript for the text and now it is working.... Thanks anyways and here is the code so anyone else knows.

<h2 id="imgh2">Change this</h2>



<SCRIPT LANGUAGE = "Javascript">
    var p1 = new Image();
    var p2 = new Image();
    var p3 = new Image();
    var p4 = new Image();

    var t1;
    var t2;
    var t3;
    var t4;

    p1.src="images/1232.png";
    p2.src="images/12312.png";
    p3.src="images/1241t.png";
    p4.src="images/12455.png";

    t1 = "Test 1";
    t2 = "Test 2";
    t3 = "Test 3";
    t4 = "Test 4";

    var imgArray = new Array (p1, p2, p3, p4);
    var textArray = new Array (t1, t2, t3, t4);

    var counter = 0;
    var loop = 1;
    setTimeout(scroll_forwards, 2000);

    var end = imgArray.length - 1;

    function scroll_forwards() {
        if (counter == end){
            counter = 0;    
        }
        else {
            counter++;
        }
        document.pic1.src = imgArray[counter].src;
        document.getElementById("imgh2").innerHTML = textArray[counter];
        setTimeout(scroll_forwards, 2000);
    }
</SCRIPT>

Upvotes: 0

Ibu
Ibu

Reputation: 43830

You just have to do the exact same thing you did with your image loop. I updated your code:

<script> // don't use the language attribute

    var imgArray = ["images/223.png","images/335.png","images/225.png","images/226.png"];
    var textArray= ["text1","text2","text3","text4"];
    var counter = 0;
    var h2Tag = document.getElementById("h2TagId"); // change this 
    var imgTag = document.pic1;
    var end = imgArray.length - 1;

    function scroll_forwards() {
        if (counter == end){
            counter = 0;    
        }
        else {
            counter++;
        }
        imgTag.src = imgArray[counter];
        h2Tag.innerHTML = textArray[counter];
        setTimeout(scroll_forwards, 2000);
    }
    setTimeout(scroll_forwards, 2000);
</script>

Upvotes: 1

Related Questions