When the page loads, the text color should remain the same without any changes

Today, I created an HTML and jQuery code for changing the color of specific classes on page load. However, it's not working on my server. When I checked it on JSFiddle, it was working fine. Can anyone explain what's wrong with this code?

<script type="text/javascript">
$('.Pending').css('color', 'red');
$('.Approved').css('color', 'green');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<span class="Approved">Approved</span>
<span class="Pending">Pending</span>

jquerycssonload

Answer №1

Make sure to insert your code within the $(document).ready() function

   $(document).ready(function(){  
    $('.Pending').css('color', 'red');
    $('.Approved').css('color', 'green');
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Approved">Approved</span>
<span class="Pending">Pending</span>

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

Aligning divs, prevent duplicate HTML within multiple divs

Currently, I am attempting to troubleshoot a jsfiddle issue. The main problem lies in my desire for the first two divs (with class="fbox") to be aligned next to each other on the same level. Furthermore, I am looking to enable dragging the image into the ...

javascriptjqueryhtmlcss

Utilizing jQuery to conceal table rows, streamlining the process

Currently, I am attempting to dynamically show and hide table rows using a toggle link that reveals or conceals them when clicked. While I have successfully implemented this feature, I am exploring ways to create a more generic function instead of duplic ...

jquery

Leveraging Greasemonkey along with jQuery to capture and manipulate JSON/AJAX data on a webpage

In my previous inquiry on Stack Overflow, I received some insight into my issue regarding Greasemonkey interpreting jQuery. However, the challenge remains in directing GM to retrieve data from a specific location and place it into an array. When visiting ...

jqueryajaxjsongreasemonkey

Showing a div dialog in an MVC view using Ajax

Just diving into the world of ajax. Here's a snippet of code I'm struggling with: <div id="authentication" title="Authentication" > <b>Please Generate a new token to continue!</b> <br /><br /> ...

asp.net-mvcjquery

What is the best way to position scale descriptions correctly?

The alignment of the Low and High scale descriptions over the first and 7th option in the image below is not as precise as I had hoped. While attempting to create elements with styles that match the scale closely in Bootstrap, I encountered difficulties in ...

javascripthtmljquerycssbootstrap-4

Sending an array with a specific identifier through JQuery ajax

I'm facing an issue where I am sending an array of values via jQuery AJAX to my servlet. However, the servlet is only picking up the first value in the array, even though there are more elements present. $.ajax({ type: "POST", url: "mySer ...

javascriptjqueryajaxtomcatservlets

Tips for blocking submissions when a user tries to input a hyperlink

I have encountered a problem in my journey of learning JS and unfortunately, I couldn't resolve it by myself. Lately, spam has been flooding through the form on my website and all my attempts with jQuery and JS to fix it have failed. As a last resort ...

javascripthtmljquery

Remove numerous entries from the WordPress database by selecting multiple checkboxes

A new customer table named "tblvessel" has been created in the Wordpress database. The code provided below selects records from the database and displays them as a table with checkboxes next to each record, assigning the record's 'ID' to the ...

javascriptphpjqueryhtmlwordpress

How to align an unordered list horizontally in HTML without knowing the number of items

I'm currently developing a web page that needs to display an unknown number of items using the ul/li HTML tag. Here are my requirements: The list should utilize as much horizontal space as possible The list must be horizontally centered, even if lin ...

javascripthtmlcss

Modify the background color of an element when hovering using CSS

When I hover over a rectangle created with HTML and CSS, I want it to change color. However, my attempts at implementing this feature have been unsuccessful. Here is the HTML code snippet: <div id="teamspeak_box"><a href="ts3server://craft412.se ...

htmlcsscolorshoverbackground-color

Rearranging table rows with jQuery based on numerical values within child elements

I require assistance in sorting the rows of a table based on the numbers within certain anchor tags. Below is an example of the table structure: <table id="sortedtable" class="full"> <tbody> <tr> <th>Main tr ...

javascriptjquery

Place an animated object in the center with the display style set to

I'm trying to vertically center the second span within my H1. After attempting to change from display: inline-block to display: flex, I found that this causes my animation to start at the beginning of the container rather than in the center. I suspe ...

cssanimationdisplay

Utilizing conditional statements and time to dynamically alter the class of an object

I need to change the class of an object based on the time, with two classes available: recommendedspot and notrecommended. The code I've written so far is not displaying the image correctly. Can someone help me troubleshoot this issue? Here is my cur ...

javascripthtmlcssdatetimeif-statement

Tips for adjusting Default ASP page size in Visual Studio for big screens?

My ASP page is not fitting the entire screen on large screens. How do I make it responsive? The CSS file contains the following styling: /* DEFAULTS ----------------------------------------------------------*/ body { background: #b6b7bc; ...

asp.netcsshtmlweb

Triggered Abide validation manually within the Zurb Foundation framework

I need to create a form with specific user experience elements that are dependent on the correct entry of information. Is there an API available for triggering the validation process for a form field manually? I am aware that I can set up listeners for pos ...

jqueryvalidationzurb-foundationabide

Create a website that is both reorderable, flexible, and resizable

I want to create a similar design using jquery/html/css. Can anyone provide an article or explanation on how to get started making something like this? ...

jqueryhtmlcss

Selecting multiple options with the same name in twill grid - a complete guide

Using twill and Python to create a web crawler, I encountered an issue with distinguishing between multiple selects with the same name. The 'showforms()' function displays a form with several fields, including 12 selects all named 'classes&a ...

jquerypythonweb-crawlertwill

Establish a jQuery cookie to store language preferences

On the website I oversee, I want to implement a way to set a cookie for the selected language. The only information available is that users choose their preferred language by clicking on a dropdown menu with distinct classes assigned to each language - on ...

javascriptjquerycookies

The parameter necessary for [Route: admin.request.update] is missing. The required URI is admin/request/{request}, and the missing parameter is 'request'

When attempting to access detail.blade.php, I encountered an error stating "Missing required parameter for [Route: admin.request.update] [URI: admin/request/{request}] [Missing parameter: request]." Despite following the steps and codes exactly as in my pr ...

phphtmlcsslaravel

Using :before and :after in CSS, three dots can be created in a horizontal line

I am currently trying to display three horizontal dots on my webpage. I have created a demonstration on jsfiddle. span { position: relative; background-color: blue; border-radius: 5px; font-size: 0; margin-left: 20px; padding: 5px; ...

htmlcss