Issues surrounding the determination of CSS attribute value using .css() function within a variable

I have been working on a function to change the color of a span dynamically from black to a randomly selected color from a predefined list. However, I am encountering an issue with the .css("color", variableName) part of my code and suspect that my syntax might be incorrect. ( http://jsfiddle.net/crismanNoble/8gM76/ )

$(".randomRoll")
    .mouseover(function() {
               var colors = ["6F216C", "F34B0D", "C50102", "5DA537", "F1D81B"];
               var pick = Math.floor(Math.random()*5);
               var colorN = colors[pick];
               $(this).css("color", colorN); 
               //alert(colorN);
               })
    .mouseout(function() {
              $(this).css('color','black');
    });

Answer №1

To ensure proper formatting in CSS, remember to prepend a hash (#) before any hexadecimal values you include.

$(this).css("background-color","#"+hexValue);

For greater organization, consider storing these hex values in an array dedicated to colors.

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

Finding the previous and next dates can be easily accomplished by combining the power of jQuery, AJAX

I have created a calendar using PHP with previous and next buttons. I am now looking to implement AJAX functionality to navigate to the previous or next date without reloading the page. Within the PHP file called by AJAX, I have a query that retrieves tas ...

Include a new button in the react material-table toolbar

I am looking to enhance the material-table toolbar by adding a new button. This button will not be directly related to the table, but instead, it will open a modal window with additional information. The button I want to add is called "quotations" and I w ...

Breaking down and modifying JavaScript JSON objects

Can someone explain how to separate a JSON object and make updates based on the ID? I've heard about using stringify! But how do I actually implement the function to update the object? <input type="text" value="{"id":"1","price":"30.00","edit":0}, ...

Please insert a border shade on my navigation bar

I have been attempting to add a special effect to my menu. Specifically, I have been trying to include a 3px border at the top of each "li" element in my menu that only appears when hovered over. Unfortunately, my attempts using :after pseudo-selector hav ...

Listening for button clicks in a Bootstrap drop down menu using JavaScript

I'm struggling to figure out how to detect button clicks in a drop-down menu. I've tried using Array.from to assign an event listener to each button in the drop-down, but it doesn't seem to work efficiently. It feels inefficient to assign in ...

Tips for altering CSS using the `:hover` pseudo-class

CSS Style for Navbar .navbar li { color: #B7B7B7; font-family: 'Montserrat', sans-serif; font-size: 14px; min-width: 70px; padding: 22px 16px 18px; } .navbar #menumain ul { width: 120%; } .navbar ul ul { display: none; } <div ...

The Bootstrap nav-link class functions perfectly in Firefox, smoothly guiding users to the appropriate section. However, it seems to be experiencing some issues

I am currently working on customizing a one-page web template and I don't have much experience with Bootstrap. The template can be found at . My issue is that the menu items are not functional in Chrome. When I click on any menu item, nothing happens ...

Sass encountered an issue when trying to import using the "~" symbol from the node_modules directory

I am currently developing a single-page web application using Angular 6, and I recently integrated the ngx-toast library into my project. However, I encountered an issue when trying to load the libraries by adding the following Sass code with the "~" symb ...

What is the best way to display items within a table using React?

I'm just starting to learn React. Can someone show me how to use the "map" function to list elements from two different arrays in two columns? state = { dates: ["2000", "2001", "2002"], cases: ["1", "2", "3"] } render() { return ( <thea ...

CSS - Overlapping elements on smaller screens due to being stacked

I am encountering an issue with a column of elements stacked below each other in my code. Here is a simplified version of my implementation: <div style="position: relative; height: 100%;"> <div style="position: absolute;">Really long text h ...

What is the best way to limit the character display to a maximum of 30 in Vue.js?

My current goal involves achieving the following task. In a certain variable, I currently have this text: let text = 'hey this is a super long phrase' I am looking to utilize a label to showcase the text, but with only a limited number of char ...

What is the best way to stack a canvas box on top of another canvas box?

My goal is to have two canvas squares stacked on top of each other. While I am familiar with drawing on canvas, I need assistance in placing one canvas on top of another. Despite my attempts at setting the position, I have not been successful. <canvas ...

Utilizing PHP for loading a fresh webpage within a specific div element of an existing page through AJAX

<!doctype html> <head> <title>Homepage</title> <style> #header{background-color:#09C; width:100%; height:100px;} #logoandsearch{background-color:#603; width:400px; height:40px; float:left; margin-top:30px; margin-left:1 ...

Javascript: Dynamically Altering Images and Text

One feature on my website is a translation script. However, I'm struggling to activate it and update the image and text based on the selected language. This is the code snippet I am currently using: <div class="btn-group"> <button type ...

Disabling CSS transitions and attempting to alter the style of an HTML element using JavaScript may not consistently work as expected

Currently, I am in the process of creating an animated effect for a website that involves moving two elements' positions over time and resetting them to their original position. Only one element is displayed at a time, and the animation should run smo ...

Is there a solution available for tidying and organizing a CSS stylesheet efficiently?

In the project I am currently working on, the previous developers took an interesting approach by constructing all the selectors based on individual properties. For instance: .panel .selected a, a.selected-thumb, .date-picker input[type="submit"], .headi ...

The HTML status code is 200, even though the JQuery ajax request shows a status code of 0

My issue is not related to cross site request problem, which is a common suggestion in search results for similar questions. When attempting to make an ajax request using jquery functions .get and .load, I'm receiving xhr.status 0 and xhr.statusText ...

Using AJAX to submit a single form

Within my HTML view, I have multiple forms that are displayed using a PHP foreach loop. One of the form examples is as follows: <form method="POST" class="like-form-js"> <input type="hidden" name="post_id" value="<?= $post['i ...

X-editable does not verify if the checklist values are checked

Hello everyone, currently I am working on a Laravel project where I have implemented the X-editable library for inline editing functionalities. I am facing an issue with updating a many-to-many relationship table (pivot table) and I am trying to use the X- ...

The JSON output from the gapi (Google Analytics) array in PHP is not displaying any values

I've been utilizing the gapi class within a CodeIgniter website. The implementation I'm using is based on this resource, which returns an array that functions perfectly. To pass this array to my JavaScript, I've been attempting the following ...