CSS: Unexpected value, received NaNrgb

I was attempting to incorporate a checkbox into a Bootstrap form that turns green when it is checked. Here is the code I used:

function updateColor() {
  $("#check1").animate({
    "background-color": "rgb(209, 231, 221)"
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c2e2323383f383e2d3c0c79627c627c612e29382d7f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


<div class="input-group mb-3">
  <span class="input-group-text"><input type="checkbox" onclick="updateColor()" id="checkbox"></span>
  <input type="text" id="check1" class="form-control" placeholder="This is a checkbox">
</div>

However, upon implementation, an error appeared in the console indicating that a color was expected but instead NaNrgb was received.
I also attempted using the hex code #d1e7dd, but encountered another failure.

Why does JavaScript confuse this for a NaN object? Is there a solution to rectify this issue?

Thank you in advance

javascripthtmljquerycssbootstrap-5

Answer №1

Feel free to customize your JavaScript code

<script type="text/javascript">
      let checkbox = document.querySelector('#check1');
      checkbox.addEventListener('click', () => {
        checkbox.classList.add('/*Add your desired class here*/')
        // or 
        checkbox.style = '/*Apply your custom styling here*/'
      });    
    </script>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14767b7b60676066756454213a243a24017671607527">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


<div class="input-group mb-3">
  <span class="input-group-text"><input type="checkbox" id="checkbox"></span>
  <input type="text" id="check1" class="form-control" placeholder="This is a checkbox">
</div>
    <input class="form-check-input danger" type="checkbox" value="" id="flexCheckDefault">

For a better practice, it's recommended to use event listeners instead of onclick Thank you!

Answer №2

To enable background-color support, it is recommended to use the jQuery.Color plugin.

function test() {
  $("#check1").animate({
    "background-color": "rgb(209, 231, 221)"
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081b1c4dfc1dfc1dc93948590c2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


<div class="input-group mb-3">
  <span class="input-group-text"><input type="checkbox" onclick="test()" id="checkbox"></span>
  <input type="text" id="check1" class="form-control" placeholder="This is a checkbox">
</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

Ways to remove the uploaded document

I have been tasked with uploading a file. The file comes with a remove button, which can be pressed to delete it. Below is the code I used: The code snippet is as follows: <div id="main"> <p id="addfile1">Add File</p> <div id ...

javajavascriptjqueryhtmlfile-upload

The td data is appearing fragmented and not continuous in one line

Why is the td element on my webpage not appearing on a single line? The weekly report for XYZ is displaying on two lines, but I want it to be on one line. Why is the label content showing up on the next line? Output: Weekly Report for Testing project ...

htmlcssasp.net

Loading website with continuous HTML5 video playback

I'm currently working on a website that features a large section with a video background set to loop. To enhance the user experience, we decided to include a preloading image while the site loads its resources. Our current setup involves using jQuery ...

javascriptjqueryhtmlvideo

Obtain the file path relative to the project directory from a Typescript module that has been compiled to JavaScript

My directory structure is as follows: - project |- build |- src |- index.ts |- file.txt The typescript code is compiled to the build directory and executed from there. I am seeking a dependable method to access file.txt from the compiled module without ...

javascriptnode.jstypescriptpath

Flex columns with flex items of equal height

I am attempting to create a layout where list items within a column have equal heights. Below is my current code: <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> ol { ...

htmlcssflexbox

Guide on entering text into a concealed text box using WebDriver and Java

When attempting to use sendkeys on an input field, I encountered a warning that puzzled me: org.openqa.selenium.InvalidElementStateException: Element must not be hidden, disabled or read-only (WARNING: The server did not provide any stacktrace informati ...

javajavascriptinputselenium-webdriverhidden-field

Struggling to make npm and sqlite3 function properly on MacOS Catalina

Struggling with npm package installation in a project directory on my Mac has proven to be quite the challenge. Each attempt at a simple npm install results in perplexing errors that I can't seem to grasp. The hurdle seems to center around specific p ...

javascriptmacossqlitenpmnode-modules

Identify whether the user is a legitimate browser or a bot or crawler

Greetings everyone! I have implemented a function on my website to retrieve the user's country using a cookie and ajax in jQuery when they first visit. However, this function takes around 800ms to run, affecting my page speed statistics. I have search ...

jqueryuser-agent

What is the best way to duplicate a Typescript class object while making changes to specific properties?

I have a Typescript cat class: class Kitty { constructor( public name: string, public age: number, public color: string ) {} } const mittens = new Kitty('Mittens', 5, 'gray') Now I want to create a clone of the inst ...

javascripttypescriptfunctional-programming

Ways to retrieve the most recent message on WhatsApp Web

I'm currently developing a JavaScript script for WhatsApp Web that will automate responses to messages in a specific group. Here is a snippet of my code: console.log('WhatsappWeb On'); function sleep(num){ setTimeout(num); } var eve ...

javascriptjquerygoogle-chromebotswhatsapp

In React Native, I must include individual radio buttons for each item retrieved from the API

When I select a radio button on mobile, all radio buttons get selected instead of just the one clicked. Here is the current behavior: https://i.stack.imgur.com/qRJqV.jpg The expected behavior is to have only the clicked radio button selected, like in thi ...

javascriptreactjsarraysreact-native

Issue with Global Variable Not Being Updated in Javascript

In my code snippet below, I am struggling to update a global variable within a callback function. function FunctionOne() { var result = ""; for (var i = 0; i < 10; i++) { AjaxFunction(function (data) { result += data; ...

javascriptjquery

Storing HTML table data in a MySQL database will help you

Operating a website focused on financial planning where users can input various values and cell colors into an HTML table. It is crucial to uphold the integrity of these HTML tables. How can I store the complete HTML table (including values and colors) i ...

javascripthtmlmysqldatabase

When clicked, the DIV expands to fit the size of the window

Is there a way to use jQuery to expand a div to full screen when clicked, and change the content or layout of the div? I have a small div on my webpage with text or images inside, and I want it to enlarge when clicked so it fills the entire window with m ...

jqueryhtmljquery-uicss

Regular Expressions in action - Substituting text within an eZ Publish XML field

Before utilizing the eZ Publish 5 API to create an Xml content, I need to make some modifications. I am currently working on implementing a Regex to edit the content. Below is the Xml code I have (with html entities) : View Xml code here http://img15.ho ...

phphtmlregexxmlezpublish

Leveraging the power of JavaScript to retrieve data from BigQuery

Having just started my journey with JavaScript and Google BigQuery, I am seeking help due to my lack of experience in these areas. My goal is to create a javascript code that can fetch data from one of the public databases on BigQuery. I came across a solu ...

javascriptjquerygoogle-bigquery

Troubleshooting a jQuery Drop-Down Problem

My dropdown menu is not working as expected. I want to show the sub-menu when clicking on an item, and remove the previous sub-menu when clicking or blurring on another menu by removing the drop-down class. However, my current jQuery code does not seem to ...

jqueryhtmlcssclassdrop-down-menu

Update the Knockout JS viewmodel from an external source

Question: How can I replace an entire object within my viewmodel that was created with the knockout mapping plugin, and ensure that the controls bound to that object are updated accordingly? Additional Information: I am currently using knockout in conjun ...

jqueryknockout.jsviewmodelsignalr

Is it possible to check the response headers in Express JS?

To view the incoming request headers, I typically use: req.headers. I am looking to see a comprehensive list of all headers that will be included in the response. Currently, res.headers returns undefined. I understand that I can set response headers usi ...

javascriptexpress

Removing data from firestore/storage does not follow the expected pathway

I have created an image gallery for users using Firebase Storage and React, allowing them to upload and delete images. However, I am facing an issue where the deletion process is taking longer than expected. Expected flow: User clicks on the trashcan ico ...

javascriptreactjsfirebasegoogle-cloud-firestorefirebase-storage