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 am currently implementing the autocomplete feature using material-ui. The data in the "customerList" displayed in the search field works fine. However, I am facing an issue with retrieving the "ID" number of the selected data. My goal is to obtain the ID ...
Here is the code snippet I am working with: function updateValue(type, id, updatedValue) { // The log below shows "updatedValue-encodeURIComponent(updatedValue)" console.log(updatedValue + "-" + encodeURIComponent(updatedValue)); if (type > ...
Here's a question that might sound silly: In my Angular project, I am looking to reorganize my component declarations by moving them from angular.module.ts to modules/modules.modules.ts. The goal is to structure my src/app directory as follows: src ...
Presently, I am executing the following code snippet: <script type="text/javascript"> $(function(){ $("#ipad").submit(function() { $.post("ipadcheck.php", $("#ipad").serialize(), function(data) { if(data.error == 'TRUE& ...
I am looking to create two different routes: /midterm/cs611 /finalterm/cs611 My goal is to display distinct content when accessing the /midterm/cs611 endpoint, and different content when accessing the /finalterm/cs611 endpoint. However, I am running into ...
In my current project, I have developed the following React component: import React from "react"; import ReactDOM from "react-dom"; import { WidthProvider, Responsive } from "react-grid-layout"; import _ from "lodash"; const ResponsiveReactGridLayout = Wi ...
I am facing an issue with maintaining state between two different JavaScript files using React. The parent class, break.js, is defined as follows: export default function AlertDialog(props) { const [demoOpen, setDemoOpen] = React.useState(true); ...
I have been utilizing this idiom in JavaScript to facilitate the creation of chained setters. function bar() { let p = 0; function f() { } f.prop = function(d) { return !arguments.length ? p : (p = d, f); } return f; } ...
Is it possible to launch the browser with JavaScript disabled in the WebdriverIO framework? I am looking to automate a scenario that requires JavaScript to be disabled. However, when I try to disable JavaScript manually in Chrome or Firefox and run WDIO s ...
I stumbled upon the website recently, particularly noticing the Social News section on the side. I am curious about how to create rotated divs (around 10 degrees) that span the full width of a webpage. Is it possible to make this responsive so that it wor ...
I am just beginning to learn JavaScript and I am struggling to figure out how to allow the user to change the city name in this request. Currently, it works when I manually input the city name in the code (e.g., askWeather.open("GET", "url.../london")), bu ...
I'm brand new to exploring the world of Javascript and could use some guidance with this task. I have a collection of checkboxes that I'd like to manipulate so that when one is checked, it disappears from the list automatically. I've come ac ...
Can anyone help me troubleshoot this issue? I'm trying to implement code that uses bootbox.confirm when deleting a file, but it's not functioning correctly. $('#fileupload').fileupload({ destroy: function (e, data) { var that = $(th ...
In my code, I have a select multiple with option groups: <select _ngcontent-oeq-14="" class="form-control" id="category-select" multiple=""> <optgroup label="grocery products"> <option>meat</option> <option>dai ...
<button type="submit" class="register-button" :class="(isDisabled) ? '' : 'selected'" :disabled='isDisabled' v-on:click=" isFirstScreen ...
I am facing an issue with a Material UI Select component that is on a dark background. I want to change the text and line colors to white just for this particular component, while keeping the rest of the Select instances unchanged. Although I have managed ...
In my component, I have a loop that goes through an array of different areas with unique IDs. When you click the button, it triggers a dialog containing an iframe. This iframe listens for an event and retrieves data as JSON, then sends it via POST to an IN ...
I am currently struggling with a complex issue related to jQuery validation on optional fields that are specified as type="number". The problem arises when users are able to input normal letters in the field, even though upon form submission the value is r ...
If you're testing my code in the Chrome Browser, hitting refresh will prompt you with 2 options. Leave This Page Stay on This Page By clicking on the Stay on this page button, it should trigger my custom function displayMsg(). Can anyone pr ...
I have implemented a feature on my website where hidden divs are revealed one at a time, with the screen scrolling to display each specific div. While this code functions well, I am now looking to enhance it by opening the hidden div and smoothly scrolling ...