Adding style to java script string

Question

I created a button that generates random text in JavaScript. I would like to style the randomly generated text to be below the button, centered, and have the following color: #8a2be2.

   
<!-- arrays -->
function GetValue()
{
    var myarray= new Array();

	myarray[0]="The calcium in our bones and the iron in our blood come from ancient explosions of giant stars."
	myarray[1]="The Chinese giant salamander can grow to be 6 feet (1.8 m) long, making it the largest salamander in the world."
<!--END-->	
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    //alert(random);
    document.getElementById("fact button").innerHTML=random;
}

<input  type="button" id="fact_button" value="Fact Button" onclick="GetValue();" />
<p id="fact button" ></p>
<h2 class="h2">click fact button for an amazing fact!</class> </h2>

What have you tried so far to apply styles and what is it you want to style? The button or the string because your question appears to be a little confusing to what it is you want to style... — NewToJS
– NewToJS, Commented Aug 16, 2017 at 16:57

FatehiAbdoThabit · Accepted Answer · 2017-08-16 16:59:47Z

1

add text inside p or div element as bellow

   
<!-- arrays -->
function GetValue()
{
    var myarray= new Array();

	myarray[0]="<p style='color:#8a2be2'>The calcium in our bones and the iron in our blood come from ancient explosions of giant stars.</p>"
	myarray[1]="<p style='color:#8a2be2'>The Chinese giant salamander can grow to be 6 feet (1.8 m) long, making it the largest salamander in the world.</p>"
<!--END-->	
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    //alert(random);
    document.getElementById("fact button").innerHTML=random;
}

<input  type="button" id="fact_button" value="Fact Button" onclick="GetValue();" />
<p id="fact button" ></p>
<h2 class="h2">click fact button for an amazing fact!</class> </h2>

answered Aug 16, 2017 at 16:59

FatehiAbdoThabit

5905 silver badges15 bronze badges

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

2 Comments

NewToJS Over a year ago

So that would be a paragraph within a paragraph.... why not just style the first paragraph rather than nesting them to apply styles... your method doesn't make sense.

FatehiAbdoThabit Over a year ago

also you can change style by code or add class for the paragraph

manpozi · Accepted Answer · 2017-08-16 17:00:27Z

   
<!-- arrays -->
function GetValue()
{
    var myarray= new Array();

	myarray[0]="The calcium in our bones and the iron in our blood come from ancient explosions of giant stars."
	myarray[1]="The Chinese giant salamander can grow to be 6 feet (1.8 m) long, making it the largest salamander in the world."
<!--END-->	
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    //alert(random);
    document.getElementById("fact button").innerHTML=random;
}

<input  type="button" id="fact_button" value="Fact Button" onclick="GetValue();" />
<p id="fact button" style="text-align:center;color:#8a2be2;"></p>
<h2 class="h2">click fact button for an amazing fact!</class> </h2>

If you want to apply css styles, you can simply add them to the <p> tag as shown above or import an external stylesheet.

Md Johirul Islam · Accepted Answer · 2017-08-16 17:05:41Z

You can use document.getElementById("fact button").style.[property] = "[value]"; to set different styles. The following code shows how you can achieve your desired goal.

   
<!-- arrays -->
function GetValue()
{
    var myarray= new Array();

	myarray[0]="The calcium in our bones and the iron in our blood come from ancient explosions of giant stars."
	myarray[1]="The Chinese giant salamander can grow to be 6 feet (1.8 m) long, making it the largest salamander in the world."
<!--END-->	
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    //alert(random);
    document.getElementById("fact button").innerHTML=random;
    document.getElementById("fact button").style.color ="#8a2be2";
    document.getElementById("fact button").style.textAlign="center";
}

<input  type="button" id="fact_button" value="Fact Button" onclick="GetValue();" />
<p id="fact button" ></p>
<h2 class="h2">click fact button for an amazing fact!</class> </h2>

Collectives™ on Stack Overflow

Adding style to java script string

3 Answers 3

2 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Related