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;
}
}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" class="color_placeholder">
<button onclick="change(this)">Change color</button>