{"id":6615,"date":"2022-09-04T07:41:33","date_gmt":"2022-09-04T02:11:33","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/"},"modified":"2022-09-04T07:41:33","modified_gmt":"2022-09-04T02:11:33","slug":"solved-text-change-when-background-colour-changes-using-javascript","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/","title":{"rendered":"[Solved] Text change when background colour changes using Javascript"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-23228809\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"23228809\" data-parentid=\"23226476\" data-score=\"0\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>Simply have the text in an array, ( get it from some elements using jquery &#8211; however you want it) iterate through it and change the content inside the div using <code>html()<\/code> function when you are changing the color.<\/p>\n<p>Simple modification of your code would be something like<\/p>\n<pre><code>function changeColorAndText(element, curNumber){\n curNumber++;\n if(curNumber &gt; 4){\n    curNumber = 1;\n }\n element.addClass('color' + curNumber, 500);\n element.html(arr[curNumber]);\n element.attr('class', 'color' + curNumber);\n setTimeout(function(){changeColorAndText(element, curNumber)}, 1000);  \n}\nvar arr = ['hi','hello ','how ','are ','you '];\nchangeColorAndText($('#testElement '), 0);\n<\/code><\/pre>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/jsfiddle.net\/tilwinjoy\/7peJT\/810\/\">JSFiddle<\/a><\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">1<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Text change when background colour changes using Javascript <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Simply have the text in an array, ( get it from some elements using jquery &#8211; 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 &gt; &#8230; <a title=\"[Solved] Text change when background colour changes using Javascript\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/\" aria-label=\"More on [Solved] Text change when background colour changes using Javascript\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[346,333,388,1080,1152],"class_list":["post-6615","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html","tag-javascript","tag-jquery","tag-text","tag-timer"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Text change when background colour changes using Javascript - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Text change when background colour changes using Javascript - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Simply have the text in an array, ( get it from some elements using jquery &#8211; 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 &gt; ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-04T02:11:33+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Text change when background colour changes using Javascript\",\"datePublished\":\"2022-09-04T02:11:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/\"},\"wordCount\":67,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"html\",\"javascript\",\"jquery\",\"text\",\"timer\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/\",\"name\":\"[Solved] Text change when background colour changes using Javascript - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-09-04T02:11:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Text change when background colour changes using Javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Text change when background colour changes using Javascript - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Text change when background colour changes using Javascript - JassWeb","og_description":"[ad_1] Simply have the text in an array, ( get it from some elements using jquery &#8211; 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 &gt; ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/","og_site_name":"JassWeb","article_published_time":"2022-09-04T02:11:33+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Text change when background colour changes using Javascript","datePublished":"2022-09-04T02:11:33+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/"},"wordCount":67,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html","javascript","jquery","text","timer"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/","url":"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/","name":"[Solved] Text change when background colour changes using Javascript - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-04T02:11:33+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-text-change-when-background-colour-changes-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Text change when background colour changes using Javascript"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/6615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=6615"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/6615\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=6615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=6615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=6615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}