How do you assign a placeholder color to an id attribute?-CodePudding

I am working on a student project in Google Apps Script. The goal at present is to change the color of a placeholder in a textarea with a button push. My current concept is to assign the placeholder to an id attribute. Is there a way to change the placeholder's color using an id?

var backgroundColors = ["white", "blue", "green", "red", "black"];
var buttonIndex = [0, 0];

$("document").ready(function() {
  console.log("Begin Kernsky ...");
  $("#button-nav-left-bottom, #button-nav-right-top, #button-nav-right-bottom, #button-nav-right-top").on("click", function(evt) {
    console.log("Clicked: ", this);
    var reset = $(this).data('btn');
    console.log("buttonIndex["   reset   "] = (buttonIndex["   reset   "]  1) % 5 ; ",
      "buttonIndex["   reset   "] = "   (buttonIndex[reset]   1) % 5   ";");
    $(this).removeClass(backgroundColors[buttonIndex[reset]]);
    buttonIndex[reset] = (buttonIndex[reset]   1) % 5;
    // Left button
    if (reset == 0) {
      $("#button-nav-left-bottom, #button-nav-right-top, #textarea-left").css("background-color", backgroundColors[buttonIndex[reset]]);
      if (buttonIndex[1] == buttonIndex[reset]) {
        console.log("Left-bottom-right-top-button changes the background-color to the next value.");
        buttonIndex[reset] = (buttonIndex[reset]) % 5;
      }
    }

CodePudding user response：

You can achieve it using CSS Variables.

On click of the button, just set the color value in the variable. Color names/codes can be used.

var backgroundColors = ["pink", "blue", "green", "red", "black", "yellow", "blueviolet", "brown"];

function change(elem)
{
  var btn = document.getElementById("btn");
  var randomIndex = new Date().getTime() % backgroundColors.length;
  btn.style.setProperty("--buttoncolor", backgroundColors[randomIndex])
}

.color_placeholder::placeholder{
  color: var(--buttoncolor);
}

<input id="btn" placeholder="Some text" >
<button onclick="change(this)">Change color</button>

CodePudding user response：

I think I'm getting closer to the answer, but I'm not sure what I'm missing. Adjusting the following snippet seems like it should solve the problem:

$(".RTL-textarea").attr("::placeholder").css({"color": backgroundColors[buttonIndex[reset]]});

Any suggestions?