Javascript - Change text and color every 3 seconds

Question

I need some help with a js code. I've searched in other topics and i've tried some codes, but they didn't work. I need to change 2 text every 3 seconds and also the second text has to change their colour.

I used an jquery code, and the first part is done, but i don't know how to do the second.

This is my code

<html>
<head>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script>
$(function () {
    cuenta = 0;
    txtArray = ["TEXT1", "TEXT2"];
    setInterval (function () {
        cuenta++;
        $("#titulos").fadeOut(100, function () {
            $(this).text(txtArray [cuenta % txtArray.length]).fadeIn(100);
        });
    }, 3000);
});

</script>
<body>
<div>
<p id="titulos">TEXT1</p>
</div>
</body>
</html>

How can I change the colour of the second array? Is there any other way to make this code with pure js, not with jquery?

Thanks for all

If we refuse to answer, will we save ourselves from bad website designs? — ergonaut
– ergonaut, Commented Nov 11, 2015 at 13:22
What's the point of not using jQuery when you already included it? Yes you can do this is native JavaScript, but will be more complex to code. — Spencer Wieczorek
– Spencer Wieczorek, Commented Nov 11, 2015 at 13:24

Justinas · Accepted Answer · 2015-11-11 13:23:43Z

1

To change CSS with jQuery use .css('rule-name', 'value') or .css({rule1: 'value', rule2: 'value'})

  $(function() {
    cuenta = 0;
    txtArray = ["TEXT1", "TEXT2"];
    setInterval(function() {
      cuenta++;
      $("#titulos").fadeOut(100, function() {
        $(this)
          .text(txtArray[cuenta % txtArray.length])
          .css('color', cuenta % 2 == 0 ? 'red' : 'blue')
          .fadeIn(100);
      });
    }, 3000);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p id="titulos">TEXT1</p>
</div>

answered Nov 11, 2015 at 13:23

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

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

Comments

stackoverfloweth · Accepted Answer · 2015-11-11 13:23:01Z

1

try this

https://jsfiddle.net/33mbjjym/

var colors = ['blue', 'red', 'green', 'pink', 'yellow'];
var colorIndex = 1;
setInterval(function(){
    $('#titulos').css('color', colors[colorIndex]);
    if(colorIndex < colors.length)
        colorIndex += 1;
    else
        colorIndex = 1;
}, 3000);

answered Nov 11, 2015 at 13:23

stackoverfloweth

6,9275 gold badges44 silver badges75 bronze badges

2 Comments

stackoverfloweth Over a year ago

not sure how this translates if you want to exclude jQuery

Spencer Wieczorek Over a year ago

It actually is only a single line change in your code: Here is a pure JS version, just note you don't have any fading effects.

Joakim M · Accepted Answer · 2015-11-11 13:22:52Z

0

Here you go:

$(function () {
    cuenta = 0;
    txtArray = ["TEXT1", "TEXT2"];
    setInterval (function () {
        cuenta++;
        $("#titulos").fadeOut(100, function () {
            $(this).text(txtArray [cuenta % txtArray.length]).fadeIn(100);
            if(cuenta % txtArray.length == 1)
            {
                $(this).css("color","red");
            }
            else
             {
                $(this).css("color","black");
            }   
        });
    }, 3000);
});

answered Nov 11, 2015 at 13:22

Joakim M

1,8032 gold badges15 silver badges29 bronze badges

1 Comment

LDM Over a year ago

Thanks for all the answers and recommendations! You guys are the best!!

roperzh · Accepted Answer · 2015-11-11 13:25:08Z

0

Since you are using JQuery, you can use the css method to change the color like this:

$(this).css("color", "red");

As an offtopic and personal recommendation, I'd suggest you to name your variables in English :).

answered Nov 11, 2015 at 13:25

roperzh

1,0209 silver badges14 bronze badges

Collectives™ on Stack Overflow

Javascript - Change text and color every 3 seconds

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related