语句不工作时的Javascript函数

当某些输入中的值为空时，我尝试将一个类添加到元素中，而当它不是空时，我尝试将另一个类添加到元素中

出于某种原因，它只是在else语句上着陆，我以为我使用了正确的语法来发送多个参数，但也许我错了

有什么想法吗

    var btnElementRegistro = document.getElementById('btnGuardar');
    btnElementRegistro.addEventListener('click' , validar);

function validar (){

var elementNombre = document.getElementById('txtNombre'),
    elementApellido1 = document.getElementById('txtApellido1'),
    elementCel = document.getElementById('numCelular'); 


    addClass(txtNombre,txtApellido1,numCelular);


}

function addClass(pName, pApellido, pCel){

if(pName.value === '' && pApellido === '' && pCel ===''){

    pName.className = "error";
    pApellido.className = "error";
    pCel.className = "error";

}else{
    pName.className = "noError";
    pApellido.className = "noError";
    pCel.className = "noError";


   }

 }

提前谢谢

编辑：我想使用if/else，以便在添加.noError时调用另一个函数来显示div（弹出窗口）。

var elementoVerInfo = document.getElementById('btnGuardar'),
elementoBotonCerrar = document.getElementById('btnCerrar');

elementoVerInfo.addEventListener('click', function () {
displayPopUp('popUpCorrecto2');
});

elementoBotonCerrar.addEventListener('click', function () {
hidePopUp('popUpCorrecto2');
});

function displayPopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('hide','');
fElementDivToShow.className = newClass + ' show';
}

function hidePopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('show','');
fElementDivToShow.className = newClass + ' hide';
}

这就是问题所在：

var elementNombre = document.getElementById('txtNombre'),
elementApellido1 = document.getElementById('txtApellido1'),
elementCel = document.getElementById('numCelular'); 

addClass(txtNombre,txtApellido1,numCelular);

txtNombre

、

txtApellido1

和

numCelular

是元素ID，而不是变量名

---

您应该传递已定义的变量名：

addClass(elementNombre, elementApellido1, elementCel);

---

我想你想要这样的东西：

function validar (){

    var elementNombre = document.getElementById('txtNombre'),
        elementApellido1 = document.getElementById('txtApellido1'),
        elementCel = document.getElementById('numCelular'); 

    /*call it using the variables not the string identifiers.*/
    addClass(elementNombre, elementApellido1, elementCel);
    /*addClass(txtNombre,txtApellido1,numCelular);*/ /* wrong */        
}

function addClass(pName, pApellido, pCel){
    pName.className = pName.value === '' ? 'error' : 'noError';
    pApellido.className = pApellido.value === '' ? 'error' : 'noError';
    pCel.className = pCel.value === '' ? 'error' : 'noError';
}

function addClass(pName, pApellido, pCel){
    if (pName.value === ''){ 
        pName.className = 'error';
    }
    else{
        pName.className = 'noError';
        displayPopUp(pName.id);
    }

    if (pApellido.value === ''){ 
        pApellido.className = 'error';
    }
    else{
        pApellido.className = 'noError';
        displayPopUp(pApellido.id);
    }

    if (pCel.value === ''){ 
        pCel.className = 'error';
    }
    else{
        pCel.className = 'noError';
        displayPopUp(pCel.id);
    }

}

编辑以回答评论中的问题

如果没有错误，我在哪里可以添加对弹出函数的调用 补充

如果要添加函数调用，则必须使用

If

，因为

？

只允许单个语句。或者，您可以按如下方式执行：

function addClass(pName, pApellido, pCel){
    pName.className = pName.value === '' ? 'error' : 'noError';
    pApellido.className = pApellido.value === '' ? 'error' : 'noError';
    pCel.className = pCel.value === '' ? 'error' : 'noError';

    if (pName.className === 'noError' && 
        pApellido.className === 'noError' && 
        pCel.className === 'noError'){
        callFunction(); /* call here the function you want */
    }
}

以上是一般的方法，因为我不知道您是想为每个输入调用函数，还是只调用一次。如果您打算为每个输入调用函数，那么您可以这样做：

function validar (){

    var elementNombre = document.getElementById('txtNombre'),
        elementApellido1 = document.getElementById('txtApellido1'),
        elementCel = document.getElementById('numCelular'); 

    /*call it using the variables not the string identifiers.*/
    addClass(elementNombre, elementApellido1, elementCel);
    /*addClass(txtNombre,txtApellido1,numCelular);*/ /* wrong */        
}

function addClass(pName, pApellido, pCel){
    pName.className = pName.value === '' ? 'error' : 'noError';
    pApellido.className = pApellido.value === '' ? 'error' : 'noError';
    pCel.className = pCel.value === '' ? 'error' : 'noError';
}

function addClass(pName, pApellido, pCel){
    if (pName.value === ''){ 
        pName.className = 'error';
    }
    else{
        pName.className = 'noError';
        displayPopUp(pName.id);
    }

    if (pApellido.value === ''){ 
        pApellido.className = 'error';
    }
    else{
        pApellido.className = 'noError';
        displayPopUp(pApellido.id);
    }

    if (pCel.value === ''){ 
        pCel.className = 'error';
    }
    else{
        pCel.className = 'noError';
        displayPopUp(pCel.id);
    }

}

---

您应该传递变量名-

addClass（elementNombre、elementApellido1、elementCel）等，而不是这些变量的ID（
txtNombre
，
txtApellido1
和
numCelular
）。您只检查其中一个变量的值。。。如果在调试应用程序时（pName.value==''&&pApellido==''&&pCel==''），是否定义了参数？我猜其中一个或全部未定义，使您的平等声明是错误的。@Andrewene我想您不小心点击了“添加评论”按钮，而不是“发布您的答案”按钮。谢谢！我知道我在那里犯了一个错误，但它不起作用。它仍然添加noError类。@CodeGrasshopper您确定输入元素完全为空（您是否尝试过console.logging）？你能给我一个简单的例子来说明这个问题吗？我设法用阿加维恩的解决方案解决了这个问题。我觉得这让我很困惑，为什么你的代码看起来应该是这样的。如果你愿意的话，我仍然可以把这张纸做成一把小提琴。@CodeGrasshopper，可能是因为你的问题措词不当。你的第一句话说如果所有输入都是空的，你想添加类，而你勾选的答案是“添加”是一个接一个的类。非常有效，谢谢！作为进一步的参考，您需要什么？是吗？我使用的是if/else，因为一旦添加了类noError，我就想使用添加到edit中的代码打开一个弹出窗口。在代码片段中，添加无错误后，我可以在哪里添加对弹出函数的调用？@code grasshopper这是
if-then-else
的快捷方式。
？
之前的部分是条件，在
？
之后是
然后是
分支，在
之后是
分支。