Question

Below is my Javascript for changing the background colour of a website, however is there a way to change text in the body of the page when this change in colour occurs?

function changeColor(element, curNumber){
curNumber++;

if(curNumber > 4){
    curNumber = 1;
}
console.log(curNumber);
element.addClass('color' + curNumber, 500);
// So previous classes get removed.
element.attr('class', 'color' + curNumber);
setTimeout(function(){changeColor(element, curNumber)}, 1000);  
}
changeColor($('#testElement'), 0);
Was it helpful?

Solution

Simply have the text in an array, ( get it from some elements using jquery - however you want it) iterate through it and change the content inside the div using html() function when you are changing the color.

Simple modification of your code would be something like

function changeColorAndText(element, curNumber){
 curNumber++;
 if(curNumber > 4){
    curNumber = 1;
 }
 element.addClass('color' + curNumber, 500);
 element.html(arr[curNumber]);
 element.attr('class', 'color' + curNumber);
 setTimeout(function(){changeColorAndText(element, curNumber)}, 1000);  
}
var arr = ['hi','hello ','how ','are ','you '];
changeColorAndText($('#testElement '), 0);

JSFiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top