Update CSS using onChange event with an array of values

Question

Update CSS using onChange event with an array of values

I'm currently working on an app that allows users to select a color scheme from a dropdown form. The hexidecimal values associated with the selected color scheme successfully populate specific text fields as intended. However, I am facing difficulty in getting the background color of the text field to change according to the selected value.

You can view my fiddle here: http://jsfiddle.net/z4WxP/7/

I have tried various approaches, including adding a class and using CSS append to assign the value, but so far nothing seems to work:

document.getElementsByName('color_body_bg')[0].value = bodyBG[text].css('background-color', value = bodyBG[text]);

jquery css arrays append

Answer 1

Answer №1

  Changing the background color of an element based on a selected option from a dropdown menu.

Here is a link to the code snippet: http://jsfiddle.net/YpJKB/

Answer 2

  Changing the background color of an element based on a selected option from a dropdown menu.

Here is a link to the code snippet: http://jsfiddle.net/YpJKB/

Answer 3

Answer №2

Insert the following code snippet at the conclusion of the displayColor() function:

  $('.appendSelection').each( function (){
      $(this).css('backgroundColor', $(this).val());
  });

Answer 4

Insert the following code snippet at the conclusion of the displayColor() function:

  $('.appendSelection').each( function (){
      $(this).css('backgroundColor', $(this).val());
  });

Update CSS using onChange event with an array of values

Answer №1

Answer №2

Similar questions

Rails 4 not properly executing success function after rendering JSON response

Enhancing Javascript Dialog Box with a Touch of Animation

toggle the class on a label that contains a checkbox

Create an array that only stores non-zero values in a

Error: operand a contains an invalid 'in' statement

Do you have any recommendations for a jQuery plugin that can create a sleek horizontal scrolling image gallery?

Having an excessive amount of CSS Sprites or none at all can be detrimental to your website's performance

Acquiring the applicable CSS for a JavaFX 8 widget

Concealing spinner controls on HTML Ionic number input

What is the best way to center CSS content such as boxes and text?

Anticipated the start of an array but encountered a string instead on line 1, character

Insert a division into the table following every row

Tips for managing a date picker with JavaScript using the Selenium WebDriver

Currently working on enhancing the responsiveness of the login form

Display the div only during the printing process

Using jQuery to extract a href URL from a div tag with jQuery

How come I am still able to use jQuery's clone(true, true) method even after leaving the function where it was originally called?

Link the click counter to individual products

How to automatically collapse all opened accordion panes in jQuery when a new one is expanded

Discover the secret to automatically calling a function every minute when the page is loaded!