Using inline CSS in JavaScript does not seem to function properly

I'm having an issue with this code. I created a javascript variable in the same file and referenced it for setting the background color of the body. However, it's not working as expected. Can someone please explain why and help me achieve my desired result? I feel like I must be overlooking something simple.

*edit: I should have mentioned that using a javascript variable for the color is crucial. Apologies for leaving that out. 

<!DOCTYPE html>
<html>

<head>
</head>

<body style="background-color:color;">
</body>
<script type="text/javascript">
var color = #555555;
</script>

</html>

javascripthtmlcss

Answer №1

The way you demonstrated using browsers is not accurate. To achieve the intended outcome, you may consider implementing the following code:

<script type="text/javascript>
    var color = '#555555';
    document.body.style.backgroundColor = color;
</script>

Check out this working example.

Answer №2

Incorporate the following line of code into your JavaScript:

var background = '#555555';
document.body.style.backgroundColor = background;

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

There is a noticeable gap at the top of the scroll area in my Bootstrap modal

Hello everyone, I have encountered an issue with the modals on my website where the scroll area does not fit the page properly. Please refer to the screenshot below for reference. I have not applied any extra styles to the modals and I am unable to pinpo ...

htmlcsstwitter-bootstrap

The TypeScript compiler is indicating that the Observable HttpEvent cannot be assigned to the type Observable

Utilizing REST API in my angular application requires me to create a service class in typescript. The goal is to dynamically switch between different url endpoints and pass specific headers based on the selected environment. For instance: if the environmen ...

javascriptangulartypescript

mixture of fluid and static width list items

Here is my custom HTML code snippets: </div><!-- /end .topbar --> <ul class="nav"> <li class="first"><a href="#">Time added</a></li&g ...

htmlcssresponsive-design

Chapter 5 of Eloquent JavaScript's 3rd Edition presents Exercise 3

I'm struggling with an exercise in the latest edition of a book, specifically in Chapter 5 which covers Higher-Order Functions. The prompt for the exercise is as follows: "Similar to the some method, arrays also contain an every method. This method r ...

javascriptarrayshigher-order-functions

Creating a sleek hover effect with a bottom border on your Bootstrap navbar

Having trouble implementing a hover effect with a bottom border in the Bootstrap navbar, similar to this: https://i.sstatic.net/sbqt4.png However, my current result looks like this: https://i.sstatic.net/JXghl.png I want to adjust the bottom border to ...

htmlcssbootstrap-4navbar

Utilize React Native to showcase JSON data in a visually appealing way by organizing it into titles and corresponding lists for both

I created a live code on Expo.io to showcase JSON data categories as titles and the subs as a list. This code utilizes .map() to retrieve data from an array. import React, { useState } from 'react'; import { Text, View, StyleSheet, Button, FlatLi ...

javascripthtmljsonreact-native

Use CSS to style text when it falls on a "/" within a table

I currently have a table with a row that displays like this: word hi Someword/AnotherWord/LastWord My goal is to use CSS to break the text at the "/" symbol like this: hi<br>Someword<br>/AnotherWord<br>/LastWord However, the curr ...

htmlcss

Verifying picture quality prior to transferring to a remote server

I am facing an issue with my image upload function to a remote server. The upload function works fine on its own, but when I integrate it into the size validation block, it stops working properly. <p> <input type="file" id="BtnBro ...

javascriptjqueryangularjs

The text within my Search button is misaligned with the button itself

The main action button on my website is the Submit Button: <input type="submit" class="myticket-schedule-btn" value="<?php esc_attr_e( 'Search', 'myticket' ) ?>"> Check out the image here: The Search Button I'm havin ...

phphtmlcsswordpresssubmit

Performing aggregation in MongoDB with nested subdocuments

I have a specific document structure as shown below: { "_id": "some_uuid", "inv": { "food01": "id01", "food02": "id02", "food03": "id03" }, " ...

javascriptnode.jsmongodb

Extract data from an HTML page using the .NET framework

I am trying to extract data from an HTML page using C# code. I am currently loading the page as a string with System.Net.WebClient and utilizing HTML Agility Pack to retrieve information within HTML tags such as forms, labels, and inputs. The issue arises ...

c#javascript.nethtml-parsing

Guide to showcasing console output on a Web Server

Apologies if this question is not the most suitable for this platform. I recently set up Pure-FTPd service on a CentOS server. To check current connections, I use the command pure-ftpwho, which gives me the following output: +------+---------+-------+---- ...

javascriptphpjquery

Creating a versatile TailwindCSS grid that can adjust to varying numbers of grid columns

I am currently working with Vue3 and TailwindCSS, attempting to create a grid using a dynamic grid-cols-{n} class. While I am aware that TailwindCSS typically supports up to 12 columns by default, the challenge arises when the number of columns needed is e ...

javascripthtmlcsstailwind-css

Loop through each div using jQuery and dynamically add or remove a class to

I am looking to create an infinite loop that adds a class to each div with a timeout in between. Currently, I have implemented it like this: $(document).ready(function() { $('.small-bordered-box').each(function(i) { var $t = $(this); ...

javascriptjqueryhtmlcss

Creating Custom GTK Themes using CSS3

Just a quick question: Can CSS3 be used to style GTK3 applications? ...

cssgtk

What is the best way to incorporate various styles into one :style attribute?

Within my vuetify project, I encountered a challenge of adding multiple styles to the same style attribute. Specifically, I have successfully implemented a vuetify breakpoint and now wish to include {backgroundColor:'Color'} within the existing a ...

javascriptcssvue.jsvuetify.js

Refresh the table dynamically in Django without the need to reload the entire page

Seeking assistance to update a small table with new data every 10 seconds on a Django website. The data is parsed into JSON and refreshed in the database, then displayed on the front-end. Looking for help with writing AJAX code to continuously refresh the ...

javascriptjqueryajaxdjangodjango-views

Attach data to a specific position within a jQuery DataTable

Hello everyone! I'm currently attempting to integrate tableInfo into a jquery DataTable, as shown below: However, when I modify the value in show-list, the information shifts down to the center of the column, as illustrated here: I have experimented ...

jquerycssdatatables

Using jQuery to restrict users from entering a character consecutively more than three times within a single word

Is there a way to restrict users from repeating the same character more than three times in a single word? For example, allowing "hiii" but not "hiiii" to be typed in a textbox? I am looking for something similar to how the textbox works on this website f ...

javascriptjqueryregex

Is it possible to add filtering to my MongoDB when using the find() method in express routing? If so, how can

Hey there! I have this GET function that uses async to find a specific "Category" mongoose Schema that the user just clicked on, along with another "Tool" mongoose Schema which fetches all tools from my database and sends them both to a rendered page. I&a ...

javascriptmongodbexpressmongoosemongoose-schema