How do I change div text using array values with Javascript?

Question

I am building a website and the homepage will basically have 2 div's containing text. I want one of the divs to change every 2 seconds with values I've placed in an array

var skills = ["text1","text2","text3","text4"];
var counter = 0;
var previousSkill = document.getElementById("myGreetingSkills");
var arraylength = skills.length - 1;

function display_skills() {
    if(counter === arraylength){
        counter = 0;
    }
    else {
        counter++;  
    }
}
previousSkill.innerHTML = skills[counter];
setTimeout(display_skills, 2000);

Put this line previousSkill.innerHTML = skills[counter]; in function — anwerj
– anwerj, Commented Sep 14, 2015 at 15:34
... and another setTimeout too, or use setInterval instead, otherwise the function is executed only once. — Teemu
– Teemu, Commented Sep 14, 2015 at 15:35
yes, #anwerjunaid is right, otherwise skills[counter] will always display text1 as it's outside the function scope. — palaѕн
– palaѕн, Commented Sep 14, 2015 at 15:35
@Alex The post you've linked doesn't seem to support your disclaimer ...? Answers are introducing alternatives, and even defending innerHTML ("innerHTML is not evil at all"), but I can't find any proofs innerHTML being evil. — Teemu
– Teemu, Commented Sep 14, 2015 at 15:41

Alex · Accepted Answer · 2015-09-14 15:43:01Z

2

innerHTML is evil, use jQuery! (assuming because you have it selected as a tag)

Working fiddle

(function($) {
  $(function() {
    var skills = ["text1","text2","text3","text4"],
      counter = skills.length - 1,
      previousSkill = $("#myGreetingSkills"),
      arraylength = skills.length - 1;

    function display_skills() {
      if (counter === arraylength) {
          counter = 0;
      }
      else {
          counter++;  
      }
      previousSkill.html(skills[counter]);
    }

    display_skills();

    setInterval(function() {
      display_skills();
    }, 2000);
  });
})(jQuery);

answered Sep 14, 2015 at 15:43

Alex

10.3k6 gold badges36 silver badges62 bronze badges

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

1 Comment

Teemu Over a year ago

Just a nit-pick: jQuery uses innerHTML under the hood, though they are using it correctly ; ).

PinkTurtle · Accepted Answer · 2015-09-16 12:44:48Z

0

You need to wrap display_skills inside a function in your setTimeout() and use setInterval() instead.

var myInterval = setInterval(function(){display_skills()}, 2000);

And make sure you call previousSkill.innerHTML = skills[counter]; inside your interval'd function - else it will run just once.

You can terminate your interval with window.clearInterval(myInterval);

answered Sep 16, 2015 at 12:44

PinkTurtle

7,0513 gold badges31 silver badges51 bronze badges

Comments

aidanjacobson · Accepted Answer · 2015-09-14 18:08:06Z

-1

Use array.join(). The syntax of this function is array.join(string), where3 string is the joining character. Example: [1, 2, 3].join(" & ") will return "1 & 2 & 3".

Hope this helps,

Awesomeness01

answered Sep 14, 2015 at 18:08

aidanjacobson

2,4291 gold badge21 silver badges18 bronze badges

Collectives™ on Stack Overflow

How do I change div text using array values with Javascript?

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related