How to change text color on javascript "type"-CodePudding

So I saw this thing were you refresh and the text changes sentences... I got the code and it works but the thing is that I cant get the color to change and the size, nor align it.

<script type="text/javascript">
var sentences = new Array(
"Best site in rsms",
"Please give us game ideas!",
"On currents :))",
"Games for fun?",
"No u",
"Pls",
 "HUH?"
 );
 </script>

This is for my head^^^
This is where i want it to go

<script type="text/javascript">document.write(sentences[Math.floor(Math.random()*sentences.length)]);
  </script>

CodePudding user response：

You can set the sentence inside the html element with innerHTML, so you can styling it with css or you just can set the style from your script; There are explanation, you can run these code snippet

var sentences = new Array(
"Best site in rsms",
"Please give us game ideas!",
"On currents :))",
"Games for fun?",
"No u",
"Pls",
 "HUH?"
 );
const container = document.querySelector(".sentence")
container.innerHTML = sentences[Math.floor(Math.random()*sentences.length)]
container.style = "color: orange"

<div ></div>

CodePudding user response：

Just use CSS for the class you want to apply changes to. Then use textContent which is way faster than innerHTML as the DOM does not need to be re-parsed and does not pose a security issue for XSS-Injections.

PS: Use single quotes in JS instead of double quotes. Otherwise, you can run into serious issues when working with HTML elements that use double quotes.

let sentences = [
  'Best site in rsms',
  'Please give us game ideas!',
  'On currents :))',
  'Games for fun?',
  'No u',
  'Pls',
  'HUH?'
];
const container = document.querySelector('.sentence')
container.textContent = sentences[Math.floor(Math.random()*sentences.length)];

.sentence {
  color: orange;
}

<div ></div>