Question 347007 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to copy value form input to variable?

I have a Color picker on my website, which includes an input with the name "acf[field_65d8d325d69cb]". The value of this field changes dynamically depending on the selected color. I’m trying to make the dynamic value of this input assigned to the variable colorValue in the following code:

// Retrieve the input element based on its name
var inputElement = document.querySelector('input[name="acf[field_65d8d325d69cb]"]');

// Check if the input element is found
if (inputElement) {
  // If found, assign the value to the variable colorValue
  var colorValue = inputElement.value;

  // Create a new style element
  var styleElement = document.createElement('style');

  // Set the CSS style content with the value from the input
  styleElement.textContent = '.editor-styles-wrapper { --theme-palette-color-10: ' + colorValue + ' !important; }';

  // Append the new style element to the head section of the document
  document.head.appendChild(styleElement);
} else {
  console.error('Input element not found.');
}

What I want to achieve is a dynamic change of the colorValue based on the selected color in the Color picker. How can I accomplish this?

Tags:

2

Answers


  1. 0

    Add an event listener to the input element, on change.

    const styleElement = document.querySelector('style[title="custom"]');

document.forms.form01['acf[field_65d8d325d69cb]'].addEventListener('change', e => {
  styleElement.textContent = `.editor-styles-wrapper {
      --theme-palette-color-10: ${e.target.value} !important;
    }`;
});
    .editor-styles-wrapper {
  background-color: var(--theme-palette-color-10);
}
    <head>
  <style title="custom"></style>
</head>

<body>
  <form name="form01">
    <input name="acf[field_65d8d325d69cb]" type="color">
  </form>
  <div class="editor-styles-wrapper">test</div>
</body>
    Login or Signup to reply.
  2. 0

    @chrwahl is right.

    But If above answer does not work there is also another approach. I have not tested it but you can give it a try.

    Now,Instead of directly reading the input value, attach an onchange event listener to the input element.
    Within the event listener function, grab the new color value using inputElement.value.
    Update the colorValue variable with the new value.
    Use the updated colorValue to create the new style element and inject it into the head, as you already have in your code.
    Here’s an example:

    // Retrieve the input element
var inputElement = document.querySelector('input[name="acf[field_65d8d325d69cb]"]');

// Check if the input element is found
if (inputElement) {
  // Add an onchange event listener
  inputElement.onchange = function() {
    // Update the colorValue with the new value
    var colorValue = inputElement.value;

    // Create and inject the style element
    var styleElement = document.createElement('style');
    styleElement.textContent = '.editor-styles-wrapper { --theme-palette-color-10: ' + colorValue + ' !important; }';
    document.head.appendChild(styleElement);
  };
} else {
  console.error('Input element not found.');
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search