将与输入框的值关联的父节点的背景颜色设置为 null

Question

这是我的代码。单击按钮时，"requiredTitleValue"的值为空。与标记关联的父节点的背景色应设置为"红色"。问题是新的backgroundColor在单击按钮后没有粘贴。

backgroundColor应该在点击提交按钮后保持，并且"requiredTitleValue"为null，但它不是。

var checkTitleValue = function(){
var requiredTitleObject = document.getElementById("requiredTitle");
var requiredTitleValue = requiredTitleObject.nodeValue;
if(requiredTitleValue == null){
alert("Object is null");
requiredTitleObject.style.backgroundColor = "red";
requiredTitleObject.parentNode.style.backgroundColor = "red";
}
} 
function formValidator(){
checkTitleValue();
}

Answer 1

根据@Mike‘Pomax’Kamermans的说法，这段代码需要一些认真的帮助。使用更好的实践将a使您的代码更干净、更容易阅读，b防止并修复您遇到的错误。

一些快速思考：

• 不要使用var.Period。始终使用let和const，以防止出现奇怪的吊装行为
• 使用类代替样式可以在元素上切换样式。这条路越走越干净，越容易改装
• 使用classList可以修改类。注意我是如何在一行中添加/删除类的，而不是到处都有if else
• 包含您的代码。只允许代码存在于需要的地方。只有您的验证器需要checkTitleValue函数，所以在那里定义它

function formValidator(){
// Notice this is const to prevent a redefinition of the lambda
const checkTitleValue = () => {
const requiredTitleInput = document.getElementById("requiredTitle");
const requiredTitleValue = requiredTitleInput;
requiredTitleInput.classList.toggle('input-error', !!requiredTitleValue);
requiredTitleInput.parentNode.classList.toggle('input-error', !! requiredTitleValue);
}
checkTitleValue();
}