/    Sign up×
Community /Pin to ProfileBookmark

How to display words in red and green

Copy linkTweet thisAlerts:
Dec 24.2010

Hi,
I have a long paragraph and I have been asked to display words in red and green in such a way that that fist word should be red, 2nd word should be green, 3rd word should be red and 4th word should be green and so on…
For example: this is just a sample.

[COLOR=”Red”]Thank [/COLOR][COLOR=”Green”]you [/COLOR][COLOR=”Red”]for [/COLOR][COLOR=”Green”]your [/COLOR][COLOR=”Red”]participation[/COLOR].

Jquery or JavaScript will do.

Thanks

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERDec 24.2010 — One possible solution (among many) ...
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Holiday Greetings&lt;/title&gt;
&lt;style type="text/css"&gt;
.red { color: red; }
.green { color: green; }
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
function Change(IDS) {
var str = document.getElementById(IDS).innerHTML;
var tarr = str.split(" "); // alert(tarr);
for (var i=0; i&lt;tarr.length; i++) {
if ((i % 2) == 0) { tarr[i] = '&lt;span class="red"&gt;'+tarr[i]+'&lt;/span&gt;'; }
else { tarr[i] = '&lt;span class="green"&gt;'+tarr[i]+'&lt;/span&gt;'; }
}
document.getElementById(IDS).innerHTML = tarr.join(' ');
}

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="poem"&gt;
'Twas the night before Christmas&lt;br&gt;
And all through the house&lt;br&gt;
Not a creature was stirring&lt;br&gt;
Not even a mouse&lt;br&gt;
&lt;/div&gt;
...
&lt;button onclick="Change('poem')&gt;Change&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

Happy Holidays! ?
Copy linkTweet thisAlerts:
@asifakhtarauthorDec 25.2010 — One possible solution (among many) ...
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Holiday Greetings&lt;/title&gt;
&lt;style type="text/css"&gt;
.red { color: red; }
.green { color: green; }
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
function Change(IDS) {
var str = document.getElementById(IDS).innerHTML;
var tarr = str.split(" "); // alert(tarr);
for (var i=0; i&lt;tarr.length; i++) {
if ((i % 2) == 0) { tarr[i] = '&lt;span class="red"&gt;'+tarr[i]+'&lt;/span&gt;'; }
else { tarr[i] = '&lt;span class="green"&gt;'+tarr[i]+'&lt;/span&gt;'; }
}
document.getElementById(IDS).innerHTML = tarr.join(' ');
}

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="poem"&gt;
'Twas the night before Christmas&lt;br&gt;
And all through the house&lt;br&gt;
Not a creature was stirring&lt;br&gt;
Not even a mouse&lt;br&gt;
&lt;/div&gt;
...
&lt;button onclick="Change('poem')&gt;Change&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

Happy Holidays! ?[/QUOTE]

Thank u very much. U are the best.
Copy linkTweet thisAlerts:
@JMRKERDec 25.2010 — You're most welcome.

Consider it a present from Santa.

Good Luck!

?

Extra for future needs: Alternative code for a 'rainbow' of colors.
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Holiday Greetings&lt;/title&gt;
&lt;style type="text/css"&gt;
.red { color: red; }
.orange { color: orange; }
.yellow { color: coral; } /* or yellow; or gold; or ... */
.green { color: green; }
.blue { color: blue; }
.indigo { color: indigo; }
.violet { color: violet; }
/* Other color names: http://www.w3schools.com/html/html_colornames.asp */
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
var wordColors = ['red','orange','yellow','green','blue','indigo','violet'];

function Change(IDS) {
var str = document.getElementById(IDS).innerHTML;
var tarr = str.split(" "); // alert(tarr);
var c = 0;
for (var i=0; i&lt;tarr.length; i++) {
// if ((i &amp;#37; 2) == 0) { tarr[i] = '&lt;span class="red"&gt;'+tarr[i]+'&lt;/span&gt;'; }
// else { tarr[i] = '&lt;span class="green"&gt;'+tarr[i]+'&lt;/span&gt;'; }
// alternate display for rainbow of colors
tarr[i] = '&lt;span class="'+wordColors[c]+'"&gt;'+tarr[i]+'&lt;/span&gt;';
c = ((c+1) % wordColors.length); <br/>
}
document.getElementById(IDS).innerHTML = tarr.join(' ');
}

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="poem"&gt;
'Twas the night before Christmas &lt;br&gt;
And all through the house &lt;br&gt;
Not a creature was stirring &lt;br&gt;
Not even a mouse &lt;br&gt;
&lt;/div&gt;
...
&lt;button onclick="Change('poem')"&gt;Change&lt;/button&gt;
&lt;p&gt;
&lt;div id="words"&gt;
Now is the time for all good men to come to the aid of their country. &lt;br&gt;
Whatever the mind of man can conceive and believe, he can achieve. &lt;br&gt;
Be alert! ... the world needs more lerts! &lt;br&gt;
All looks yellow to a jaundice eye. &lt;br&gt;
Beauty is skin deep, but ugly goes cleart to the bone. &lt;br&gt;
&lt;/div&gt;
...
&lt;button onclick="Change('words')"&gt;Change&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

×

Success!

Help @asifakhtar spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...