Question

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

出于某种原因它只是登陆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（PopUp）。

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';
}

Answer 1

这就是问题所在：

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);

Answer 2

我认为你想要这样的东西：

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';
}

编辑回答评论中的问题

一旦noError，我可以在哪里添加对PopUp函数的调用加入？

如果要添加函数调用，则必须使用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 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);
    }

}

Javascript函数IF语句不起作用

2 个答案: