jQuery Array Randomizer Not Functioning Properly

I'm attempting to randomly assign background colors to table cells. I've created an array:

var randomColor = ["red","blue","green","mint","yellow","lightPurple"];

along with this function:

function setRandomColor(){
    return randomColor[Math.floor(Math.random() * randomColor.length)];
  }

You can view the code on jsfiddle here:

http://jsfiddle.net/2J8yq/16/

Upon running the program multiple times, you may notice that some td cells end up with a white background color unexpectedly. This is strange since white is not included in the array of options. I am unsure why this issue occurs, any insights would be greatly appreciated!

Thank you.

Answer №1

lightPurple and mint are not recognized as valid color keywords. This will result in an error message like:

Expected a color value but found 'mint'. Error occurred while parsing the value for 'background-color'. Declaration has been discarded.

If you see "Declaration dropped." at the end, it indicates that the web browser does not comprehend that particular rule and therefore does not apply any background color to the element.

You can refer to the official CSS specification for a list of valid color keywords which includes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

Answer №2

This is an OutOfRange error.

Let's say a random function generated the number 1 (it generates numbers from 0 to 1). Now, if we multiply this number by the array length of 6, the result would indicate that you are referencing an element outside of the valid range.

Remember, arrays are zero-based, so the last element's index is actually 5, not 6.

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 causing the CORS error with JQUERY and JQM?

My HTML5 page is set up without any jQuery and has no CORS error, as shown below: <!DOCTYPE html> <HTML> <button type="button" onClick="getBase64FromImageUrl()">Click Me!</button> <img id="preview1" crossorigin="anonymous" src=" ...

Is there a way to delegate properties in Angular 2+ similar to React?

When working with React, I have found it convenient to pass props down dynamically using the spread operator: function SomeComponent(props) { const {takeOutProp, ...restOfProps} = props; return <div {...restOfProps}/>; } Now, I am curious how I ...

The webpage is visible on the DOM, but it is inaccessible for crawling

Currently, I am unable to access the code directly. However, I have a client whose website was built using AngularJS. The website appears to be fully functional on the front end with all elements loading correctly. Despite this, when attempting to test cra ...

The body's width is more compact compared to one of my containers in HTML/CSS

After completing my code for a beginner's HTML/CSS project, I realized that the main parent container holding two smaller containers needed to be set at specific widths. The two inner containers had to be exactly 650px and 270px wide, while the main p ...

Ways to trigger a re-render in React for a functional component when a prop undergoes a

I have a situation in my application where I am passing weather data to a component as a prop, and I want the color of the temperature to change based on that value. I tried implementing it, but it seems like React doesn't always re-render when a prop ...

In an AngularJS custom filter function, the error message "keys is not defined" is displayed

As I was reviewing examples in an Angular JS book, I came across a concept that has left me puzzled. It involves the use of custom filters with ng-repeat. Below are the code snippets: <a ng-click="selectCategory()" class="btn btn-block btn-default btn- ...

What are the steps to utilizing binary search on an array with an odd number of elements?

I've been utilizing the binarySearch function and it has been performing well with arrays that have an even length, but issues arise when the array has an odd length, resulting in incorrect output. Here is my current implementation: public static in ...

Text stretched to its fullest height and rotated using the transform property

check out the demo Here is a demonstration of HTML elements: <div class="controller"> <div><a href="#buttton-1">Special Offer</a></div> </div> And here is the styled CSS for the demo: .controller{ width: 55px; ...

How to extract the value of a key from JSON using JavaScript

Need help with an API call to retrieve a list of subcategories? Here's an example of the JSON format: { "description": "Flower", "name": "Flower", "parent_id": "1" }, { "description": "Moon", "n ...

The Jquery css on my website is not functioning properly

After creating a website feature where clicking on a specific div triggers an onclick event processing a chat_generate function, I encountered some issues. This funciton should insert HTML for the chat into a designated .open_div based on the id generated ...

Tips for extracting a specific attribute from an array of objects using both react and JavaScript while considering various conditions

I have a set of objects structured like this: const obj_arr = [ { id: '1', jobs: [ { completed: false, id: '11', run: { id: '6&apos ...

Explaining the way jQuery data() eliminates circular references

After reading an explanation about the benefits and implementation process, I still have a question - how exactly does it eliminate the circular reference?. Can you explain how the circular reference is broken? $(div1).data('item', div2); $(div ...

Click on the sort icon in React JS to change its state

I need to update the sort icon in my table header when a user sorts a column. Here is the current implementation of my sorting function: var headerColumns = []; var IconType = 'triangle'; var IconSort = 'top'; var onToggleO ...

Swapped out image hyperlink for a clickable button

As someone new to javascript, I'm encountering an issue with this code. I want to update my image links when a button is clicked in my code. However, the problem is that my image links are already being updated before I even click the button. Below ar ...

How can you selectively conceal the nth item in a v-for loop while keeping the original array intact? Discover a way to do this using the search function

I have a reference variable called foxArticles that holds a list containing 100 items. Using a v-for loop, I iterate over each value and render all 100 values on the page. <template> <div class="news_container"> <div v- ...

Guide to incorporating a dynamic object within another object in JavaScript

I have fetched data from an API and organized it in a constant variable called res. Next, I am using a nested for loop to extract information about devices and countries. I create a variable that combines the names of these devices and countries, and then ...

What is the best way to establish the render() method for an 'arrow' component?

I came across the following code snippet: const CoolComponent = props => { ... I am looking to add a render() function to it: render() { console.log('Hello world'); return ( <Bar foo={true} {...propz} ...

Double firing of Jquery trigger event

Check out this example I have, where the trigger fires twice when selecting cars. Take a look at my code: $(document).on('change','.sellkop',function(){ if ($("#rs").is(':checked')) { $("#text_container").a ...

Incorporate Stripe Elements into your Nuxt Js application

I recently managed to integrate Stripe into my React + Spring Boot application by following the guidelines provided in this documentation: https://stripe.com/docs/stripe-js/react. I used it in my React class component. Now, I am transitioning to Nuxt from ...

Tips for identifying the most frequently occurring value in arrays within MongoDB/Mongoose documents

Imagine a scenario where there is a collection with documents structured like this: [ { "username": "user123", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88fdfbedfac8b9b ...