javascript - 保存特定值时如何更改输入背景颜色和文本颜色？

Question

这是我第一次使用 Stack Overflow 网站，如果有任何不清楚或遗漏的内容，我深表歉意。如果您想查看我的代码的特定部分，请告诉我。

我根据 MVC 模型 (OOP) 编写了 PHP 代码(尽我所能，如果这不是最佳实践，请原谅我)并使用 phpMyAdmin 来保存我的数据。

在我的示例照片中，您可以看到我有输入字段(在包含表单的表格内)。在输入字段中，您可以输入 4 到 10 之间的数字。正如您在图片中看到的，每个数字在您键入时都有自己的文本颜色和背景颜色(由于 oninput 事件)。

但是，当我按 Enter 并保存数字时，特定的文本颜色和背景颜色消失了。

this is what I would like to see also when the data is saved here is another example this is what you see when the numbers are saved and this is what I don't want

这是我的代码示例。它只是表格单元格之一，您可以在其中输入数字并按 Enter 键将其保存在我的数据库中(我为此编写了一个 JavaScript 函数)。

<td id="color1" class="score">
    <input type="number" min="4" max="10" name="p_1_1" id="p_1_1" value="
    <?php $pointsData->fetchPoint1_1($_SESSION["userid"]); ?>" oninput="changeColor(this.value)"></input>
</td>

如果有人可以解释如何在数据存储在数据库中时保留颜色(如前两张图片所示)，那就太棒了!

亲切的问候，罗宾

我尝试了很多事情，我尝试了使用 PHP 代码以及创建 Javascript 函数的几种方式的 if 语句。例如，我写了一些 if、if esle、if else 等语句，在括号之间分配了特定的数字。然后我回显输入行并在输入元素中包含 style 属性。为背景颜色和文本颜色指定不同的值。不幸的是，它不再显示数据，因为显示和编辑数据的代码是 PHP 代码。因为它位于输入元素的值内，所以它是嵌套在 HTML 代码内的 PHP 代码，嵌套在 PHP 代码内。如果可以这样嵌套，我不知道如何嵌套。

如果这太奇怪了，我很抱歉，我还删除了所有我尝试过但不起作用的代码，所以我无法向您展示。

Answer 1

一种方法是在页面首次加载时在每个适当的输入上触发相同的 changeColor 函数。

如果尚未输入输入值，您可能需要通过测试 inp.value 并做出适当 react 来防止调用 ChangeColor。从你的问题中无法看出具体内容应该是什么。

document.addEventListener("DOMContentLoaded", () => {
  let inputs = document.querySelectorAll(".score input");
  for (let inp of inputs) {
    changeColor.call(inp, inp.value);
  }
});