Failed attempt to change background color using jQuery

Creating a new notification system where I need to highlight a specific comment once it has been scrolled to.

I initially thought of implementing a background color change timeout, but I'm facing some issues with it...

Check out this example:

I have temporarily disabled scrollIntoView() as it was causing disruptions in the jsfiddle environment.

$(document).ready(function(){
  var commentid = "comment";
  //document.getElementById(commentid).scrollIntoView();
  $(commendid).css('background-color', 'red');
});

This is the code, any idea why the background color isn't changing as expected?

javascriptjquerycss

Answer №1

You seem to have a couple of issues.

  1. Remember to use a # for identifying an id in your code.
  2. There is a typo in your code, it should be commentid instead of commendid.
$(document).ready(function()
{
    var commentid = "comment";

    $("#" + commentid).css('background-color', 'red');
});

Answer №2

Make sure to include the '#' symbol, as it serves as an identifier

let userID = "#user";

Answer №3

Make sure to include the '#' symbol when selecting an element using jQuery!

$(document).ready(function(){     
  $('#comment').css('background-color', 'red');
});

Answer №4

Here's a suggestion:

$(document).ready(function(){
 var box = "#box";
 $(box).css({'background-color': 'orange'}); 
});

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 process for moving a tap-target button with materialize css?

Looking for tips on how to relocate a tap-target button that's currently stuck in the bottom right corner of the screen. I've experimented with various methods like adjusting margins, padding, and even nesting it in an outer div, but nothing seem ...

cssmaterialize

What is the most effective method for utilizing AJAX to load external resources?

Looking to load external resources from another server such as css, templates, and data, but unsure of the best approach? Often when attempting to load external files, the Access-Control-Allow-Origin problem arises. Here are a few possible solutions: - U ...

jqueryajaxapiload

What is the most effective method to retrieve the UserName using Javascript?

Can someone please explain to me the difference between using session["user"].name and session["user:name"]? // I don't understand why we have to put the user session into the JavaScript global space :( var session = { user: { "Id":"d675c ...

javascriptjson

Managing two simultaneous web service calls in Angular 2

Dealing with two parallel web service calls can be tricky. Sometimes the first call goes through first, and other times it's the second one. The problem arises when the function in my second service requires data from the first service call. I attemp ...

javascriptangularpromise

Add HTML syntax highlighting to a text area for coding purposes

I am facing a seemingly straightforward issue, but I worry that it may be too complex for me to handle on my own. My goal is to incorporate a textarea into a webpage where users can input HTML code, click a button, and have the interpreted HTML displayed i ...

javascriptjqueryhtmlcssjsp

Utilizing pure JavaScript to dynamically fetch HTML and JavaScript content via AJAX, unfortunately, results in the JavaScript

I am trying to load an HTML file using AJAX and then execute a script. Here is the content of the HTML file I want to load: <div class="panel panel-body"> <h4>Personal Data</h4> <hr /> <span data-bind="editable: firs ...

javascripthtmlajaxknockout.js

What is the best way to pass a module from the controller to a Jade/Pug template and then use it as an argument in an event handler within the template?

I passed the module 'naija' to a template from the controller in this way: res.render('testing', {title:"filter setting page", nigeria:naija }); The func ...

javascriptnode.jsexpresspug

Node.js and EJS are throwing an error, indicating that the file.ejs is unable to identify the variable definitions

I am facing an issue with my express.js server template. A 'x is not defined' error keeps popping up, but I can't seem to find where the problem lies. I even checked a friend's code from the same tutorial, and it works on his machine. ...

javascriptnode.jsexpressejsembedded-javascript

There seems to be an issue with node.js - headers cannot be set after they have already been sent to

As I work on developing my blog, I've encountered an issue with rendering different paths using the router parameter. Each time I attempt to display another route, an error surfaces. Unfortunately, I'm unable to provide more details at this momen ...

javascriptnode.jsexpressbackendejs

Is there a way for me to determine if something is hidden?

My goal is to have selector B toggle when selector A is clicked or when clicking outside of selector B. This part is working fine. However, I'm struggling with preventing selector B from toggling back unless selector A is specifically clicked - not w ...

javascripthtmljquerycssfrontend

Purge React Query Data By ID

Identify the Issue: I'm facing a challenge with invalidating my GET query to fetch a single user. I have two query keys in my request, fetch-user and id. This poses an issue when updating the user's information using a PATCH request, as the cach ...

javascriptreactjstypescriptreact-hooksreact-query

Refreshing the Mocha Server

Recently, I encountered a situation where I needed to automate some cleanup tasks in my Express server using Mocha tests. In my server.js file, I included the following code snippet to manage the cleanup operations when the server shuts down gracefully (s ...

javascriptnode.jsexpressmocha.js

Issue with JSON data not functioning properly in AJAX request

I have been facing an issue with detecting whether a database entry has been successfully input. I am sending the new inserted ID and a JSON variable to an AJAX call, which works fine in all browsers but not in phonegAP. Despite that, the data is being suc ...

javascriptjqueryajaxjsoncordova

UI-Router is failing to transition states when $state.go() is called

I am currently troubleshooting a unit test for my user interface router routes, specifically focusing on the issue I encountered with the test not passing successfully. Within my test script, when checking the value of $state.current.name, it returns &apo ...

javascriptangularjsunit-testingjasmineangular-ui-router

Prepared SQL Statement in NodeJS for MSSQL using WHERE IN clause

I'm using the sql npm package in my Node.js project. Currently, I have an array of product SKUs like this: var skus = ['product1', 'product2', 'product3']; The SQL query stored in a file looks like this: SELECT * FROM ...

javascriptsqlsql-servernode.jsprepared-statement

Ways to retrieve dictionary keys as an array in Angular

Here is an example of an Angular dictionary: { ARRAY1: [{...}, {...}, {...}] ARRAY2: [{...}, {...}, {...}] ARRAY3: [{...}, {...}] ARRAY4: [{...}] } I want to show all the keys of arrays from this dictionary on an HTML page. I attempted to do ...

javascripthtmljsonangulartypescript

Removing an item using AJAX/jQuery in the Django framework

I currently have a template set up to showcase a collection of items pulled from the database. {% for item in items %} <li> {{ item }} - Tags: {% for tag in item.tags.all %} <a href="/{{ user }}/{{ tag }}/">{{ tag }}</a> ...

jqueryajaxdjango

Using PHP and jQuery to create an autocomplete feature with data retrieved from a

Despite extensive research and review of past questions and answers on this subject, I am still facing confusion. My goal is to access the database that contains a user's contact list. To start off simply, I'm currently only allowing reference by ...

phpjquerymysqlautocomplete

What is the best way to automatically select options in a dynamic dropdown menu

In my code, I have a list of user records. One column has a dropdown to change the produced by. The ng-change function is working fine. However, after refreshing the page, the dropdown does not show the last selected option. Please review my code below - ...

javascriptangularjs

Even after diligently assigning a unique key to each child in react, why do I continue to encounter an error?

I've attempted this task previously and have provided a key, but for some reason I keep encountering an error. As I am relatively new to working with React, it's possible that there is a simple mistake hiding somewhere within my code. Update: Th ...

javascriptreactjsreduxreact-redux