Ways to modify font color in JavaScript "type"

Recently, I came across a fascinating technique where by simply refreshing the page, the text changes sentences. I managed to implement the code successfully, however, I am having trouble changing the color, size, and alignment of the text.

<script type="text/javascript">
var phrases = new Array(
"Welcome to our website",
"Do you have any game suggestions?",
"Discussing latest trends",
"Let's play games for fun!",
"Not you",
"Pretty please",
 "Confused?"
 );
 </script>

This is just for my reference^^^
This is where it should be displayed

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

Answer №1

To customize the sentence within the HTML element, you can use innerHTML to apply CSS styling or set the style directly from your script. Here's a demo where you can test this functionality: 

var phrases = new Array(
"The best website ever!",
"We need game suggestions!",
"Talking about currents :)",
"Fun gaming options?",
"No way",
"Please",
 "What?"
 );
const container = document.querySelector(".phrase")
container.innerHTML = phrases[Math.floor(Math.random()*phrases.length)]
container.style = "color: blue"
<div class="phrase"></div>

Answer №2

To apply changes to a specific class, utilize CSS and then implement textContent. This method is preferred over innerHTML as it does not require the DOM to be re-parsed and helps prevent XSS-Injections.

Note: When working with HTML elements in JavaScript, use single quotes instead of double quotes to avoid potential issues.

let messages = [
  'Exciting news!',
  'What are your thoughts?',
  'Discussing current events',
  'Fun game suggestions',
  'Negative response received'
];
const container = document.querySelector('.message')
container.textContent = messages[Math.floor(Math.random()*messages.length)];
.message {
  color: blue;
}
<div class="message"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for accessing the firebase user's getIdToken method in Next.js after a page reload

Currently, I am developing a Next.js project and implementing user authentication using Firebase's signInWithPhoneNumber method for phone number verification. After successful verification, I receive a Firebase user with the getIdToken method to retri ...

javascriptreactjsfirebasenext.js

CSS designs that adapt flawlessly to high-resolution mobile devices with perfect responsiveness

Currently, I am implementing max-width: 768px to modify the appearance of my website. However, with the increasing number of high-resolution devices available in the market such as 4K mobile phones, I am wondering how I can detect them. Should I consider ...

htmlcss

Issue with triggering (keyup.enter) in Angular 8 for readonly HTML input elements

My goal is to execute a function when the user presses Enter. By setting this input as readonly, my intention is to prevent the user from changing the value once it has been entered. The value will be populated from a popup triggered by the click attribut ...

javascripthtmlangulartypescript

Error: The function jQuery(...).hexColorPicker does not exist

I am attempting to utilize a color-picker jQuery plugin. Below is a screenshot of the JavaScript file: https://i.stack.imgur.com/ovRjx.png Here is the code I am using to initialize it: <script type="text/javascript> jQuery(function(){ ...

javascriptjqueryhtml

Calculating the difference between the old scrolltop and the new scrolltop in jQuery/Javascript

I have a seemingly straightforward question, yet I am struggling to find a solution. Each time a user scrolls, the scrollTop value changes. I want to subtract the previous value from the new value of the scrollTop. However, I am unsure how to store the old ...

javascriptjqueryscrolltop

Converting a timestamp from PHP in JSON format to date and time using JavaScript

Within the JSON file, there is a timestamp associated with each user login. An example of this timestamp is: timestamp: "1541404800" What steps should be taken to convert this timestamp into date and time format? ...

javascriptjson

What are some methods for utilizing the data received through this.props.history?

Whenever I need to navigate from one route to another using this.props.history.push("/"), I also want to pass along some extra data. For example: this.props.history.push('/postDetail', {data: item}). However, I am uncertain about where to define ...

javascriptreactjsreduxreact-reduxreact-router-dom

Extracting precise information from a JSON file using Angular's $http.get

I am struggling with extracting a specific user from a JSON file containing a user list and displaying it on an Angular index page. Despite extensive research, I have been unable to find a satisfactory solution. The user list must remain in a JSON file ins ...

javascriptangularjsjson

Execute a script when a post is loaded on a WordPress page

I am looking to have my jQuery script execute every time a post page is opened or loaded. I tried using echo in the script but it did not work. Where should I place the script to ensure it runs? single.php <script src="https://ajax.googleapis.com/aja ...

javascriptphpjqueryajaxwordpress

Issue encountered when attempting to connect an external script to a Vue single file component

Struggling to link an external script to a single file component in Vue. My project setup is as follows: I need to link the file components/Sshy to ../javascripts/ I have successfully linked other scripts using either of these methods before: ../javasc ...

javascripthtmlvue.jswebpackvuejs2

The disappearance of the "Event" Twitter Widget in the HTML inspector occurs when customized styles are applied

Currently, I am customizing the default Twitter widget that can be embedded on a website. While successfully injecting styles and making it work perfectly, I recently discovered that after injecting my styles, clicking on a Tweet no longer opens it in a ne ...

javascripthtmlcssreactjstypescript

Issue: ReactJS + MaterialUI + TypeScript - Property 'component' does not exist?Possible error in ReactJS: component property is

Currently, I am designing my own custom typography. However, I have encountered an error while implementing it. I have been referring to the following documentation: https://mui.com/material-ui/api/typography/ Here is the code snippet that I am using: h ...

javascriptreactjsreduxreact-hooksmaterial-ui

Making modifications to the CSS within an embedded iframe webpage

Assigned with the task of implementing a specific method on a SharePoint 2013 site. Let's dive in. Situation: - Within a page on a SharePoint 2013 site, there is a "content editor" web part that displays a page from the same domain/site collection. T ...

javascriptjqueryhtmlcssiframe

Using the @ Symbol in Javascript ES6 Module Imports

One of the folders in my node_modules directory is called @mymodule, and within it, there is another folder named 'insidefolder'. The path to this folder looks like this: node_modules/@mymodule/insidefolder When trying to import insidefolder us ...

javascriptnpmwebpackecmascript-6babeljs

Styling Material UI components with CSS is a great way to

I'm facing difficulties while working with Material UI components. Currently, I have a Material UI table and I want to center-align the text within it. The standard CSS of Material UI contains an element named MuiTableCell-root-60 which has a text-a ...

cssmaterial-ui

AngularJS can be used to display a webpage

After facing the need to print a given page using AngularJS, I came up with a simple solution as shown below: <div class="modal fade" id="extrait" aria-hidden="true" data-backdrop="false"> <table class="table table-hover table-bordered" i ...

javascriptangularjs

Getting dynamic props from a clicked element in React involves accessing the target element's properties and

I am currently working with a React "tree" menu component that has main links with submenus generated dynamically through a JSON GET call. Upon inspecting the tree in the React Inspector, I noticed that each element has multiple props associated with it. H ...

javascriptreactjs

What is the best way to place a button within a line of text

I am trying to achieve a layout similar to this: -------------------button------------------ I can add text inside the line, but it doesn't look good when I add a button. Any suggestions on how I can improve this? ...

htmlcss

Is it necessary to have nodejs, or can I just depend on Nginx alone?

I am currently in the midst of a discussion with my colleagues regarding whether or not to incorporate node.js into our application. We have decided to utilize angular.js for the front-end and communicate with the app server through a REST api. The app ...

javascriptnode.jsangularjsnginx

Tips for choosing a particular list item using jQuery: retrieve the attribute value of 'value' and showcase it on the webpage

I have a task that requires the following: Implement an event listener so that when you click on any list item, the value of its "value" attribute will be shown next to this line. In my HTML, I have an ordered list with 8 list items. The values range fro ...

javascriptjqueryhtmljquery-selectorsjquery-events