How can I change the color of a div based on whether it is currently red or green?
I attempted the following code, but it doesn't seem to be working as expected.
if ($(this).css("background-color")=="rgb(34,187,69)"|| $(this).css("background-color")=="rgb(255,0,51)") {
var s = confirm("Are you sure you want to pushback?");
if (s == true) {
$(this).css("background-color","#ffffff");
}
Can anyone verify if this code is correct?
Colors can appear differently in various browsers. To ensure consistency, apply classes in CSS and validate with jQuery using hasClass().
.green{
background-color: green;
}
.red{
background-color: red;
}
if ($(this).hasClass("green") || $(this).hasClass("red")) {
var confirmPushback = confirm("Are you sure you want to pushback?");
if (confirmPushback) {
$(this).css("background-color","#ffffff");
}
When the browser returns the value as rgb(34, 187, 69), it may not match the comparison being made as rgb(34,187,69). This discrepancy could be the reason why the inner statements are not executing as expected.
I hope this explanation helps resolve your issue.
Here is another illustration:
$(document).ready(function(){
$('#container').click(function(){
var color_ = $(this).css("background-color");
var colorr = convertRGBtoHex(color_);
if (colorr=='#ff0000') {
var decision = confirm("Are you sure you want to go back?");
if (decision == true) {
$(this).css("background-color","#ffffff");
}
}
});
});
var hexDigits = new Array
("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
//Function to convert RGB format to hexadecimal color
function convertRGBtoHex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function hex(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}#container{
background:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">Click Here</div>Give this a shot:
function updateBackground(obj) {
if ($(obj).css("background-color") === "rgb(34, 187, 69)" || $(obj).css("background-color") === "rgb(255, 0, 51)") {
var response = confirm("Are you sure you want to change the color?");
if (response === true) {
$(obj).css("background-color", "#ffffff");
}
}
}
For the HTML part:
<input type="button" id="Change_Button" value="updateBackground" style="background-color: rgb(34,187,69)" onclick="updateBackground(this)" />
Colors may vary in appearance depending on the browser you are using. However, feel free to experiment with the following code:
function convertRgbToHex(red, green, blue) {
var hexRed = red.toString(16);
var hexGreen = green.toString(16);
var hexBlue = blue.toString(16);
return "#" + (hexRed.length == 1 ? "0" + hexRed : hexRed) + (hexGreen.length == 1 ? "0" + hexGreen : hexGreen) + (hexBlue.length == 1 ? "0" + hexBlue : hexBlue);
}
alert( convertRgbToHex(0, 51, 255) );
Feel free to test and compare the results.
I want to create multiple useStates for dynamically generated elements within an array.map. Each element in the array.map should share the same useState but have a unique assigned value. For instance, if the array.map contains three different elements, e ...
I am attempting to create a Twitter direct message with predetermined text already filled in. My current method involves using window.open() to prepare the message. window.open(https://twitter.com/messages/compose?text=${this.helloWorld}); helloWorld = ...
My journey with Node JS and express is just beginning as I dive into building a website that serves static files. Through my research, I discovered the potential of using NodeJS with Express for this purpose. While I have successfully served some static HT ...
Currently, I am attempting to include a link that will direct users to the create page. However, when I tried clicking on the link, I encountered the following error: TypeError: Cannot read properties of undefined (reading 'cookies') The code fo ...
Looking to create an Array of objects with enum properties. export enum MyEnum { FIXTERM1W = 'FIXTERM_1W', FIXTERM2W = 'FIXTERM_2W', FIXTERM1M = 'FIXTERM_1M', FIXTERM2M = 'FIXTERM_2M', FIXTERM3M = 'FIX ...
Attempting to utilize Create React App but encountering an issue that demands Node 10 or above. Presently, my node version is Node 8.10.0 and unfortunately, I am unable to update the Node version as it's a work device. Is there a method to operate an ...
I'm experiencing some timeouts with a synchronous XML HTTP request in Safari on my Mac. In an attempt to fix this issue, I added a timeout setting like this: req.open(this.method, fullURL, this.isAsync); req.setRequestHeader('Content-Typ ...
Currently, I have an operational Express.io server up and running. However, I am encountering issues with the proper loading of my Javascript files. Here is a snippet from my Jade file: html head h1 Test index body script(src="/so ...
If I have an object like this: let fruitSong = {'apple song':12, 'banana song': 24} Object.keys(fruitSong).forEach(e=>{ if(e.startsWith('apple')){ console.log(fruitSong[e]) } }) Is there a different meth ...
Although I have some experience with jQuery and javascript, I am still relatively new to the world of programming. I can write basic scripts, but I feel that there is room for improvement in optimizing some of my code. Specifically, I'm working on a p ...
I am encountering an issue with my code where it is returning an 'undefined' error. The problem arises when I attempt to remove an id from an array using the variable 'id', but instead, it throws an error stating 'undefined'. ...
Imagine a container that is 1200px wide, with three divs inside. Each div is only 292px wide. The first div should align with the left margin, the third div with the right margin, and the second div should sit right in the middle of them. Adding to the c ...
Setting up a database for Weapons for Sale and incorporating PHP code: <?php echo '<link rel="stylesheet" href="display.css" type="text/css">'; function FindPhoto($name) { $dir_path = "http://www.chemicalzero.com/FireArms_Bis/Guns ...
My current task involves working with a basic navigation bar in HTML code, like this: <div class="views"> <b>Views</b> <hr style="background-color:#f0efef;"> <table id="views_table ...
I was attempting to create an application showcasing the use of AJAX. Being new to AJAX, I couldn't pinpoint the error in my code. The XMLHttpRequest object is being created, but nothing else seems to be working. The ready state doesn't change to ...
I have a custom tree-view component that I'm working on: <template> <li class="main__li list" :style="{'margin-left': `${depth * 20}px` ,'background-color': `${col}`}" @click="toggle(e); getEl( ...
Within my Vue application, I've implemented a response interceptor: axios.interceptors.response.use(function (config) { return config; }, error => { if (error.response.status !== 401) { return new Promise((resolve, ...
I am currently dealing with a form that involves uploading a file. Everything is working fine, with the form post controller checking for the existence of a file with the same name in the database. If a file with the same name exists, it passes the HttpPos ...
Greetings, I have encountered an issue with my server setup. I am attempting to redirect users to the Google authentication screen when they navigate to the /auth/google path. However, instead of being redirected, I am consistently landing on my 404 error ...
CoDrops offers a website tour feature created with jQuery, which can be found at this link: http://tympanus.net/Development/WebsiteTour/ However, there is an issue when you click on "Start the tour". It will initially show a Next button, which then change ...