Here is the code I am using:
$("p").css("background-color", "yellow");
alert( $("p").css("background-color"));
The alert is showing undefined instead of the expected color value.
I have tested this code on both Google Chrome and Firefox. Strangely, it works fine in the example provided by w3c website, even though I am using the same jQuery version.
It seems like the code is being called before jQuery has loaded, or there is no <p> tag in the document when the code runs.
To check if it's the first case, move the script to the window's onload event handler. This way, the code will only execute after all scripts have been fully loaded.
window.onload = function(){
if(window.jQuery){
$("p").css("background-color", "yellow");
alert( $("p").css("background-color"));
}
else{
alert("jQuery is not loaded");
}
}
If you see the alert saying jQuery is not loaded, then you've found the issue.
To check the second scenario, ensure that there is a <p> tag present in the document before trying to modify its CSS.
Everything is working perfectly as expected in this JSFiddle example.
$("p").css("background-color", "yellow");
alert( $("p").css("background-color"));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
test
</p>Make sure that you have a <p> element in your HTML code (just like in my fiddle), and double-check if JQuery is included, for example:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
give this a shot instead of your current script.
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
alert( $("p").css("background-color"));
});
});
if you're working with HTML, try this out
<body>
<h2>This is the main title</h2>
<p>This is some content.</p>
<p>This is additional text.</p>
<button>Press Me</button>
</body>
this relates to fundamental Javascript. Make sure to specify which HTML element's property you want to alter using Javascript.
Ensure that you have added the JQuery source within the head tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
The script is running smoothly on JSFiddle. Check it out here: here
Forget about it, I figured out why it's not functioning properly. I mistakenly generated the p AFTER this command, causing it to select nothing.
I have developed a cross-platform app using AngularJS, Monaca, and OnsenUI. Within the app, there is a large form with multiple drop-down select options. The majority of these options are Yes/No selections. To handle these Yes/No options, I've creat ...
Trying to keep things concise here. I have a division called "the box" with a fixed width of 1200px that contains various other divisions. One of these divisions is a links bar, known as the "pink bar", which has a width of 100% and a height of 25px. My is ...
I have a JSON array containing objects which I need to pass the values to the DataTables. [{ _id: '58a2b5941a9dfe3537aad540', Country: 'India', State: 'Andhra Pradesh', District: 'Guntur', Division: ...
I have two arrays of objects - one containing selected data and the other containing general data that needs to be displayed General data for display const arr = [ { id: "1", name: "Skoda - Auto" }, { id: "2" ...
I am currently working on implementing a parallax effect, which is mostly successful. However, I have encountered a minor issue. Instead of the parallax effect being relative to the element's current position, it abruptly jumps to position 0. How can ...
There seems to be an issue with the font size on SVG. Even though both the SVG and paragraph have a font-size of 16px, they appear different. I would like the font size in the SVG to match that of the paragraph. Another concern is how to center <tspan ...
I have incorporated a 3D hamburger model on my website using Three.js. However, I am facing an issue where the rotation behaves unexpectedly. The burger is supposed to rotate around itself at a 45-degree angle, but instead, it rotates from the upper left c ...
Front-end: const [filters, setFilters] = useState({ type: "", country:"", }); const onChangeFilterType = e => { const workingObject = {...filters}; workingObject.type = e.target.value; setFilters(workingObject); }; ...
I am currently in the process of converting an HTML5 template into a Wordpress theme. One specific feature I'd like to add is a custom scroll for Wordpress using the code: <script src="jquery.nicescroll.js"></script> DEPENDENCIES This cod ...
Having some asynchronous issues with getting the state in my component. It's working fine when I console log in mapStateToProps, but for some reason it shows the old state when I console log inside render function. Any ideas on how to properly chain f ...
I have created a sleek sliding navigation panel for my website that appears when the screen width is reduced. Although I am satisfied with how it functions currently, I would like the panel to close when the user clicks/taps outside of it. What adjustments ...
Can anyone help me with document embedding in HTML? In my current project, I am directly embedding my update logs as text files into the webpage, along with a selection menu to view all the updates. However, I ran into a minor issue where the Firefox cons ...
Examining the HTML and CSS code below: * { box-sizing: border-box; } .field { overflow: auto; } .field label { float: left; width: 80px; } .field input { display: block; width: 100%; } <div class="field"> <label>Test< ...
I am currently utilizing the taggd Plugin to develop an application that creates a tag whenever any part of the body is clicked. I have successfully implemented most aspects of it, but I am facing an issue with the coordinates. The tags are sometimes creat ...
After reviewing the specifications on http://api.jquery.com/jQuery.ajax/, I discovered that scripts are automatically evaluated for each response depending on the dataType. Is there a way to prevent jQuery from evaluating the script portions of the respo ...
Currently in the process of developing an application using Node.js with MongooseJS as the middleware for handling database operations. Encountering an issue with nested schemas, specifically with one of them being populated incorrectly. Despite tracking ...
Recently delving into Node Js, I embarked on a learning journey and attempted the following code. However, it seems to be throwing an error that has left me stumped. Despite searching for solutions, I can't seem to pinpoint what's causing the iss ...
I need help with my React mapping function that displays a series of cards, each with its own button to open up a dialog box. Right now, I'm struggling to pass the unique ID from each object to the correct dialog box. Instead, all IDs are being passed ...
I need to find the exact date from one week ago in SQL format using Node.js. I attempted a similar solution as described here - How to get yesterday date in node.js backend? but unfortunately it's not working for my specific case. ...
How can I dynamically toggle the isExpanded property on click based on an element's ID in a React project? Below is the JSON data structure I am working with const handleExpandOutlineItem = (id: string) => {} This is the structure of my JSON data: ...