javascript - 将与输入框的值关联的parentNode的背景色设置为null

这是我的代码。单击该按钮并且“ 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();
}

最佳答案

根据@Mike'Pomax'Kamermans，此代码需要一些认真的帮助。
使用更好的做法将使您的代码更整洁，更易于阅读，并且b防止和修复您遇到的错误。

一些快速的想法：


不要使用var。期。始终使用let和const防止奇怪的起吊行为
使用类代替样式可以在元素上切换样式。它更清洁，更容易修改
使用classList修改类。请注意，我如何能够在一行中添加/删除类，而不是到处都有
包含您的代码。只允许代码存在于需要的地方。只有您的验证器需要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();
}