Adjust the field's color depending on the outcome displayed within

I'm trying to implement a feature where the field value changes to green when "OK" is selected and red when "NOK" is chosen. I have written the following JavaScript code but it's not working as expected - the colors change before clicking submit, but after submission, the field color reverts back to white.

 $(document).ready(function(){
    if(document.getElementById('janadd').value == 'NOK') {
      document.getElementById('janadd').style.background-color = "red";
    }
    else if (document.getElementById('janadd').value == 'OK') {
      document.getElementById('janadd').style.background-color = "green"; 
     } 
    else if(document.getElementById('janadd').value == 'Partial'){
     document.getElementById('janadd').style.background-color = "yellow"; }
    };
 });
javascripthtmljquerycss

Answer №1

It is recommended to utilize backgroundColor instead of background-color as the latter is not a recognized attribute within the style object.

Answer №2

$(document).ready(function(){
    var color = $('#janadd').attr("value");

    if( color == 'NOK') {
      $('#janadd').css("background-color", "red");
    }
    else if (color == 'OK') {
        $('#janadd').css("background-color", "green"); 
     } 
    else if(color == 'Partial'){
               $('#janadd').css("background-color", "yellow");
    };
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="janadd" value="Partial">Yellow Color</div>

this is a snippet using jQuery:

$(document).ready(function(){
    var colorValue = $('#janadd').attr("value");
    if( colorValue == 'NOK') {
      $('#janadd').css("background-color", "red");
    }
    else if (colorValue == 'OK') {
        $('#janadd').css("background-color", "green"); 
     } 
    else if(colorValue == 'Partial'){
               $('#janadd').css("background-color", "yellow");
    };
 });

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

The regular expression for email validation does not accurately verify the portion following the period

I'm currently working on validating email addresses in my HTML page using an Angular directive. From my perspective, a valid email address looks like this: [email protected] The regular expression I've been using allows for email addresse ...

javascriptregexangularjs

Transferring information from an HTML webpage to a PHP file and then redirecting to the homepage

My goal is to post the data to datahouse.php, which will then submit the data to the server and redirect to the Index page without displaying the datahouse.php file on the page. register.html <form method="POST" action="DataHouse.php"> <input ty ...

phphtml

Determine the number of elements located inside a designated slot

Take a look at this Vue component code: <template> <!-- Carousel --> <div class="carousel-container"> <div ref="carousel" class="carousel> <slot></slot> </div> </div&g ...

javascriptvue.jsvuejs2vue-component

Filter ng-repeat using OR condition for property

I'm trying to filter a list based on a model value entered in a text box. For example: var person={}; person.Id=1; person.Name="Test 1"; person.PetName="Rest 1" var persons=[]; persons.push(person); person.Id=2; person.Name="Test ds"; per ...

javascriptangularjs

Building a Node.js authentication system for secure logins

Just diving into node.js and trying to create a user login system, but encountering an error when registering a new user: MongoDB Connected (node:12592) UnhandledPromiseRejectionWarning: TypeError: user is not a constructor at User.findOne.then.user ...

javascriptnode.jsmongodbexpress

Locate the .offset value for every element that has the class X

Is there a way to retrieve the .offset of multiple elements using variables? I envision something along these lines: var position = $(this).offset().top; $(".number").text(position); My goal is for each element with the .number class to display its own s ...

jqueryvariablesoffset

What is the best way to perform a cross-domain Ajax request to a remote server by utilizing a local PHP file as a

I am facing a challenge where I need to update data in a RDF graph by making a POST call. When I attempt to do this using Ajax in jQuery directly, I receive a console warning stating 'No 'access-control-allowed-origin' ecc.ecc.' However ...

phpjqueryajaxcors

Using PHP, JavaScript is unable to hide <div> elements

I'm encountering an issue where the div I want to show when an error occurs is not hiding and showing properly using JavaScript. Here is a snippet of my code: <script> function hideerror() { var catdiv = document.getElementById(error); ...

javascriptphpjqueryhtmlcss

Interactive YouTube video in a responsive classroom environment

Hello! I have a website at bit.ly/1EfgOsM and I am trying to align the video box with a YouTube video next to an image box. The width of the image box is set to 40%, so I want the video box to also be responsive with a width of 40%. The video box is in a s ...

htmlcssyoutuberesponsive-design

How to stop empty numbers in angular.js

My goal is to ensure that an input with a required attribute always has some value, and if left empty, defaults to zero. <input ng-model='someModel' required> I have created the following directive: App.directive('input', fun ...

javascriptangularjsangularjs-directive

Issue TS7053 occurs when trying to access any index of the target of a React.FormEvent<HTMLFormElement>

I've been working on adapting this tutorial to React and TypeScript. Here is the code snippet I have implemented for handling the onSubmit event: const handleSignUp = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); ...

javascriptreactjstypescriptreact-hookstsx

Looping through objects and updating state based on a filter condition

Within my React state, there exists an array of objects similar to the following: timers: { id:"-LL-YVYNC_BGirSn1Ydu" title: "Project Title" project: "Project Name", elapsed: 0, runningSince: 0, }, { id:"-LL-YVYNC_BGirSn1Ydu-2", ...

javascriptreactjsecmascript-6

Ways to avoid divs overlapping on a mobile device?

If you visit this page: The recent searches section displays correctly on a computer, but it overlaps with the footer when viewed on an iPhone 6. What steps can I take to avoid this issue? ...

htmlcss

Discover Vuejs: Display Less, Reveal More

In order to achieve a specific task, I need to display 12 items in 4 columns with 4 items each. Initially, only the first four items are visible and the rest are hidden until the user clicks the "Show More" button. Upon clicking the button, the next row ...

htmlvue.js

Determining the Source Page of a JQuery Call using the HttpHandler Object

One of the challenges I am facing involves the HTTP Handler FaqsJson.ashx, which is responsible for generating a JSON using StringBuilder. Within this Handler Object, I am invoking a StoredProcedure and passing a single Variable, FactTypeID, which is curre ...

jqueryasp.net

WebGL Error: An invalid operation occurred while trying to use the uniformMatrix4fv function. The error code [WebGL-00000A18072FEA00

Currently, I am working on an app that showcases 360° images and I rely on the BabylonJS library for this feature. The navigation bar helps me switch between different 360 locations within the application. However, whenever I try to change the 360 image ...

javascriptreactjsbabylonjsbabel-babylon

Discovering the base color using a hexadecimal color value in C#

When working with a Hex color code in C#, how can you determine if the color falls under the categories of Red, Green, Yellow, Pink, Orange, or Blue? ...

c#htmlsystem.drawingsystem.drawing.color

Leverage CSS styling for database values within a PHP framework

How can I style MYSQL database values in HTML using CSS? My vegetarian database row has 'Y' for yes and 'N' for no. I want to apply different styles to these values using CSS as I display them on my PHP-based page. if ($result1->num_ ...

phphtmlcssmysqldatabase

Creating a dynamic form that efficiently captures user information and automatically redirects to the appropriate web page

Sorry for the unusual question, but it was the best way I could think of asking. I have come across websites with fill-in-the-blank lines where you can input your desired information and then get redirected to another page. For example: "What are you sea ...

javascripthtmlcsswordpress

iOS Safari: Full-width header with fixed position exceeding viewport width

Encountered an issue specific to Safari on iOS. Creating a page with a fixed position header that spans the width of the viewport. The content consists of multiple images that should scroll horizontally while the header remains in place during scrolling. ...

htmlioscsssafari