Estoy trabajando en un proyecto de estudiante en Google Apps Script. El objetivo en este momento es cambiar el color de un marcador de posición en un área de texto con solo presionar un botón. Mi concepto actual es asignar el marcador de posición a un atributo de identificación. ¿Hay alguna manera de cambiar el color del marcador de posición usando una identificación?
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; } }Puedes lograrlo usando Variables CSS .
Al hacer clic en el botón, simplemente establezca el valor del color en la variable. Se pueden utilizar nombres/códigos de colores.
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>