如何使用按钮在文本框属性（文本、文本框背景和占位符）的不同颜色集之间切换？

Question

我想在每个文本框属性的不同颜色之间切换，作为它们自己的“预设”。而且，如果有多个文本框，将应用相同的预设。它应该基于以下代码： &

下面是我的代码，如果对你们造成混乱，我深表歉意：\

标题

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h3>Toggle the Colors of a textbox on a Button Click</h3>

我尝试为它使用“颜色”类。

<input type="text" id="txt" placeholder="Type Here" class="colors"> <br>
<input type="text" id="txt2" placeholder="Type Here" class="colors"> <br>
<button id="colorButton">Click</button>

我为按钮做了一个“addEventListen”，但也许我应该只做一个 onClick。 textPreset variable 包含预设列表。

<script>
    var textPreset = ["Blank Paper", "Calc LCD", "Blue LCD", "Red LED", "Neon Yellow"]

 var i = 0
 const button = document.getElementById("colorButton");
 button.addEventListener("click", cyclePresets);

cyclePresets function 假设使用 textPreset var 与文本框属性关联。 preset 显然是 textPreset 数组的值。

  function cyclePresets(textColor, placeHolder, textBox){
      textPreset[0] = ("black", "grey", "white");
      textPreset[1] = ("black", "black", "green");
      textPreset[2] = ("black", "black", "blue");
      textPreset[3] = ("red", "red", "black");
      textPreset[4] = ("yellow", "yellow", "black");
       var preset = textPreset[i];

i 显然循环遍历数组，告诉我是否应该只使用 for 循环。

      if (i == 5){
      i = 0;
      }
      else{
      i = i + 1;
      }

那个 textBox parameter 可能也很糟糕，因为我有占位符的东西，只是把我从教程中看到的东西拿来并在那里拍打。然后我尝试将文本框设置为 preset var，这可能是 lmao 的一个想法。

      textColor = document.getElementsByClassName ("colors").style.color;
      placeHolder = document.getElementsByClassName ("colors").style.backgroundColor;
      textBox = document.getElementsByClassName ("colors")[0].placeholder.style.color;
  
      document.getElementsByClassName("colors") = preset;
  
  }
</script>
</body>
</html>

我假设我犯了很多错误，但请不要生我的气。我刚刚开始学习这些东西。也许我想得太多了，或者我太野心勃勃了，不利于我自己。我还需要为此使用 CSS 吗？完整代码

如何使用按钮在文本框属性（文本、文本框背景和占位符）的不同颜色集之间切换？

问题描述投票：0回答：0

最新问题

如何使用按钮在文本框属性（文本、文本框背景和占位符）的不同颜色集之间切换？

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0