I am looking to apply CSS to a dynamically generated div ID.
var status = var status = item.down().next().innerHtml();
if(status == "test")
{
var c = 'item_'+i ;
c.style.backgroundColor = 'rgb(255, 125, 115)';
//'item'+ i.style.backgroundColor = 'rgb(255, 125, 115)';
}
In this case, "item_" + i represents dynamic IDs for each row such as item_1, item_2, item_3, and so on. I want to add CSS to specific rows, like item_1 and item_3 among others.
How can I achieve this?
To properly apply the style property, make sure to retrieve the element by using its id. You can achieve this by utilizing document.getElementById().
var status = var status = item.down().next().innerHtml();
if(status == "test")
{
var c = 'item_'+i ;
document.getElementById(c).style.backgroundColor = 'rgb(255, 125, 115)';
//'item'+ i.style.backgroundColor = 'rgb(255, 125, 115)';
}
Alternatively, you can incorporate jQuery's id-selector and use css() for applying CSS styles.
var status = var status = item.down().next().innerHtml();
if(status == "test")
{
var c = 'item_'+i ;
$('#'+c).css('background-color','rgb(255, 125, 115)');
//'item'+ i.style.backgroundColor = 'rgb(255, 125, 115)';
}
Utilizing suggestions from fellow users is one way to approach this task. Another method is to employ the following technique. When solely relying on plain JavaScript, it is necessary to first locate the element by utilizing the function document.getElementbyId
var x = document.getElementbyId('item_' + i);
x.style.backgroundColor = 'rgb(255, 125, 115)';
Discover numerous methods to attain the desired outcome. Along with other solutions, you can utilize jQuery for achieving this task.
$("div#" + dynamic_id).css("background-color", "rgb(255, 125, 115)");
If you want to apply CSS to a dynamic div element, you can achieve this by using the following code snippet:
$("div"+dynamic_id).css({"color":"rgb(255, 125, 115)"});
I need to add functionality for adding and deleting rows in multiple tables on my website. Currently, I am doing this by directly inserting HTML code using jQuery, but it has become inefficient due to the number of tables I have. I am considering creating ...
Recently set up a fresh Vue project on Windows 7 using the VueJS UI utility. Unit testing with Jest enabled and added babel to the mix. However, when running "npm test" in the command line, an error is returned stating 'Error: no test specified' ...
On my test.html page, I've included the following code snippet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </head> <body> ...
I encountered some challenges while styling the Vimeo video I embedded. Here is the player I am using: I want the player to occupy the entire screen for all viewport sizes, so I applied min-width: 100vh and min-height: 100vw. I was able to adjust the wi ...
I am currently working on a loop that retrieves user IDs, names, etc. from a JSON file. I am trying to display this data in a list view within an Ionic framework. When I simply use direct alerts in JavaScript, the users are displayed correctly, but when I ...
I am looking for a way to transform all headers on a page into clickable permalinks using jQuery or JavaScript. Here is the HTML code: $('h3').each(function() { var id = $(this).attr('id'); if (id) { //Check if the element has a ...
Looking for help with my login page design. I have two login buttons - one for regular login and one for Google login. I want to add a stylish horizontal line with the word "OR" between the buttons, similar to the image in the link provided. https://i.sst ...
New to the world of AngularJS, I find myself faced with a challenge. My .NET MVC WebAPI Restful app is up and running on an IIS server. However, when I attempt to query the API using , the response I receive is: [{"Id":1,"Name":"Glenn Block","Created":"00 ...
I needed to switch the JavaScript execution context from the parent window to the child window. I was able to successfully load my script objects and functions into the child window context, however, I encountered difficulty in making third party libraries ...
I've been working on creating a Cache Hashtable using JavaScript. When I use the code cache.splice(0,0, ...dataPage);, it inserts my data starting from the first position up to the length of dataPage. Assuming that my dataPage size is always 10. Th ...
Using AngularJS version 1.5.3 In my view, I have a list of items that I want to display. After every two items, I would like to show a new div below the first one. <div class="col text-center" ng-repeat="event in weekDay.events"> & ...
Whenever I type "npm run build:prod" build:prod npm run build -- --configuration production --aot --optimization=false I encounter the following error: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e4e3ece1fbafece3 ...
Below is my JavaScript code: $('#tags').select2({ tags: true, tokenSeparators: [','], createSearchChoice: function (term) { return { id: $.trim(term), text: $.trim(term) + ' (new tag)&ap ...
I have encountered an issue with the stripe form I am currently using for payments. When the form is loading, it displays "test mode" in the top right corner. I am unsure how to switch it to live mode and cannot find any option on the stripe dashboard to d ...
Employing next.js 13.1.1 along with /app Previously, I had been handling all of my styles using a global.css, however, I am now attempting to transition them into CSS Modules. Within my root layout.js, there is a Header component that is imported from ./ ...
I have implemented various elements to toggle the display of information on my HTML website. While I've successfully created buttons, nav-tabs, and modals, clicking on the trigger element doesn't reveal the associated content. I've even doub ...
I am currently working on implementing the example found at http://bl.ocks.org/mbostock/1093130. The goal is to have the "update" function redraw the graph with a completely different dataset each time a button on the DOM is pressed. I have made some modif ...
Looking for a way to append table data stored in local storage, I attempted to use a loop to add cells while changing the numbers based on row counts. Here is my JavaScript code snippet: $(function() { $("#loadTask").change(function() { var ta ...
I'm currently working on creating a drop-down menu using nested unordered lists. The functionality of the menu is all set, but I'm running into some styling issues. The main link that triggers the drop-down should have a blue background with whit ...
I am currently working on a new API project and I'm facing some challenges. I have removed certain information, like the Bearer token, for privacy reasons. This is my first attempt at creating an API and I could use some guidance. Reading books and br ...