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

What is the best way to ensure that the input search bar, microphone icon, and two small boxes adapt to different screen

Upon submitting my exercise for The Odin Project, I was under the impression that everything looked perfectly aligned and centered on my MacBook Pro 15-inch screen. However, when I viewed the completed webpage on a larger computer screen at work, I noticed ...

htmlcss

Display information on a web page based on user input using HTML

I've hidden other p tags and divs using display:none, How can I make them visible after inputting my name? I'd like to type in my name and reveal all the content within the previously hidden div <form method="post"> <p> < ...

javascriptjqueryhtmlcss

Creating a custom dropdown behavior using Angular

I have a unique interface requirement where users must be able to click on an element to view its options, which are displayed as checkbox inputs. Essentially, I need a custom 'select' element that allows for multiple checkbox selections. ...

jqueryhtmlcssangularjs

Utilizing server-side cookies in next.js and nest.js for efficient data storage

I have been working on a small application using Next.js and Nest.js. One of the functionalities I implemented is a /login call in my client, which expects an HttpOnly Cookie from the server in response. Upon receiving a successful response, the user shoul ...

javascriptauthenticationnext.jscookiesnest

Events for focusing and blurring top level windows

I'm encountering an issue with a basic frameset setup <frameset rows="100, 200"> <FRAME name="listener" src="frame1.html"> <FRAME name="content" src="http://www.someexternalurl.com/"> </frameset> Within the listener ...

javascriptjqueryevents

Issues with jQuery spinner not currently active

For quite some time, I had this code working perfectly in my Rails application: $(function () { // Modifying the link's icon while the request is in progress $(document).on('click', 'a[data-remote]', function () { ...

javascriptjqueryruby-on-railsajax

Guide on enabling automatic rotation using Javascript

Recently, I came across a slider online that unfortunately did not have an autorotate feature. Despite my attempts to add an autorotate function using setTimeout and click functions, I was unsuccessful. This particular slider contains 4 buttons for each s ...

javascriptjqueryevents

What is the best way to create a Div element that functions as a button, becoming active when clicked while deactivating all other Div elements

function toggleButton1() { $("#button1").toggleClass("button-active button-inactive"); $("#button2").toggleClass("button-inactive button-active"); $("#button3").toggleClass("button-inactive button-active"); } function toggleButton2() { $("#butto ...

javascripthtmlcssbootstrap-4

What is the best way to retrieve the promise that encountered an error in the catch block while using async/await

I'm currently in the process of converting code that used .then/.catch to instead use async/await. One particular challenge I'm facing is how to access the original promise that fails within the catch block, for logging purposes. Here is the ori ...

javascriptasync-await

React JS: How to prevent Yup and Formik error messages from being displayed multiple times upon submission

I have implemented Yup and Formik in my Sign up form to handle validation. My goal is to display specific errors based on the Yup validation rules I've set up. Take a look at the code snippet below: import React from 'react'; import { ...

javascriptreactjsvalidationformikyup

An unexpected error occurred while parsing the JSON document: "unexpected token: '{'"

I'm facing an issue where I need to specify a URL in a JavaScript app that retrieves weather data from an API. The URL is constructed using a string and some variables. When I initially wrote the code below, I encountered the error message Missing { b ...

javascriptjson

Issues with the proper functionality of the .ajax() method in Django

I'm currently facing an issue with my Ajax code while trying to interact with the database in order to edit model instances. I noticed that the first alert statement is functioning correctly, however, the subsequent alert statements are not working as ...

javascriptjqueryajaxdjango

What methods are available for authentication to be shared among microservices?

I am managing two distinct Node.js services. Service X handles user authentication. Once a user successfully logs in, they are directed to Service Y (which is hosted on a subdomain of the domain where Service X resides). Authentication is done using JWT. ...

javascriptnode.jsauthenticationjwtmicroservices

What is the Vercel equivalent to .netlify/functions?

I'm in the process of deploying this repository: https://github.com/DataStax-Examples/astra-tik-tok using Vercel instead of Netlify. I've converted vanilla React to Next.js, but I'm unsure how to transition the code in the Home.js file to w ...

javascriptnext.jsserverlessvercelnetlify-function

Having trouble with submitting the second stage of a multi-step form through Ajax technology

I'm currently tackling a multi-step form project using JavaScript, specifically focusing on submitting the second step of the form via Ajax. I've taken the initiative to create a distinct JavaScript file titled ajaxRequest.js to manage the Ajax r ...

javascriptphpjqueryajaxlaravel

Creating methods in Vue that can alter elements created during the mounted lifecycle hook can be achieved by defining functions

I am trying to implement a button that can recenter the canvas. The idea is that when the button is clicked, it will trigger the rec() method which should reposition the canvas that was created in the mounted() function. However, this setup is not working ...

javascriptvue.jsfabricjs

Event fails to trigger when attached to different elements

Currently, I have an onchange event linked to the input text box and an onclick event attached to a text link. Interestingly, when I click on the link after editing the textbox, the click event does not trigger - instead, the change event is fired. If you ...

javascripthtml

Another option instead of using useCallback

Forgive me if this is a novice inquiry, but I am still learning JavaScript and React. I recently discovered the necessity of utilizing useCallback to wrap callback functions in order to prevent them from being recreated constantly when used within a fun ...

javascriptreactjsscope

The appearance of my HTML is distinct on Chrome for Windows and Safari for OSX

I have designed a prototype of some HTML code, but my website appears differently on Safari compared to how it looks on Chrome. While it displays correctly on Chrome, on Safari (both on OSX and mobile phones) the alignment seems off and randomly centered i ...

htmlcssmacosgoogle-chromesafari

An issue occurred while evaluating the Pre-request Script: Unable to access the 'get' property of an undefined object

I need help accessing the response of my POST request in Postman using a Pre-request Script. Script below : var mobiles = postman.environment.get("mobiles"); if (!mobiles) { mobiles =["8824444866","8058506668"]; } var currentMobile = mobiles. ...

javascriptpostman