javascript - 简单的 JS 在更改时更改字段颜色

Question

我有一个表单，其中包含多个必填字段和许多非必填字段。我希望必填字段在单击之前呈淡粉色，然后恢复为所有字段的默认颜色。我还没有真正尝试过任何东西，因为我不确定如何制定它。我为具有 rgba 颜色值的字段创建了一个不同的类。我发现的一个例子确实是 addClass，但是我需要更改的字段已经有一个类来定义其宽度、轮廓等。addClass 会更改现有类，或者是否有“changeClass”功能或类似的功能？我尝试在这里修改答案:Change Class value With Javascript当我单击该字段时可以工作，但那不起作用。我也尝试使用 document.querySelectorAll，因为我有多个字段被其他非必填字段分隔，并且我不希望它们都具有相同的 id 或位于相同的 div 中。

我试过了

function changeClass(){
  document.getElementByClass(".reqd").className = "ssmall4";
}

或

function changeClass(){
  document.querySelectorAll(".reqd").className = "ssmall4";
}

与

<input onClick="changeClass()" type="number" id="certYear" name="certYear"value="2020" class ="reqd">

有人可以帮我把这些点联系起来吗？

我现在可以使用以下方法让它在一个字段上工作:

`<label for="certYear">Certification Year:
<br>      
  </label>
  <input type="number" id="certYear" name="certYear"value="2020" 
onclick="myFunction()" class="reqd">`

和

 `function myFunction() {
  document.getElementById('certYear').style.backgroundColor = "white";
}`

但是如果我将函数更改为 document.getElementsByClassName 我得到“未捕获类型错误:无法设置未定义的属性‘backgroundColor’”如果我尝试使用 document.querySelectorAll ，情况也是如此(我假设在这个例子中，这是因为我必须定义一个变量，并且我不知道如何以上述以外的方式执行 bg 样式颜色更改)

我想我可以复制该函数大约 10 次，每个字段一次，然后重命名该函数并更改 id，但这看起来相当不优雅。

Answer 1

您可以使用纯 CSS 完成您想要的操作:

.reqd {
    background: pink;
}

.reqd:active {
    background: white;
}

替换为适当的颜色，如果您需要，您可以仅定位背景颜色，但本质上，如果您要查找的只是粉红色文本字段，单击它们时为白色(“事件”)，则基本上应该这样做”)。