Why is one of my functions isn´t working while onclick event?-CodePudding

I have a form with fields for password and confirm password and other input fields. I created a function that calls other functions. Basically this one function calls a function that shows a confirmation message before submitting my form, and the other function is a validation for the two password fields to be equal.

So the function that is showing the confirmation message does work but the validation for passwords doesnt.

function confirmarAlta(){
            
            var result = confirm("Esta seguro que desea crear este usuario?");
            
            if(result == false){
                event.preventDefault();
            }
        }
    
    
 function verificarPassword(){
        var pass = document.querySelector(".password").value;
        var confirmPass = confirmPassword.querySelector(".confirmPassword").value;
        console.log(pass);
        console.log(confirmPass)
            
        if(pass != confirmPass){
            alert("Las contraseñas no coinciden");
            pass = "";
            confirmPass = "";
        }
        
    }   
    
    
function Validaciones(){
            verificarPassword();
            confirmarAlta();
        }

<div >
              <label>Contraseña: </label>
              <input type="password"  name="txtPassword" required>
            </div>
            <div >
              <label>Repetir Contraseña: </label>
              <input type="password"   name="txtConfirmarPassword" required>
            </div>
          
          
          
          <input onclick="Validaciones()" type="submit"  value="Aceptar" name="btnAceptar">

The error im getting is confirmPassword is not defined.

CodePudding user response：

function confirmarAlta(){
            
            var result = confirm("Esta seguro que desea crear este usuario?");
            
            if(result == false){
                event.preventDefault();
            }
        }
    
    
 function verificarPassword(){
        var pass = document.querySelector(".password").value;
        var confirmPass = document.querySelector(".confirmPassword").value;
        console.log(pass);
        console.log(confirmPass)
            
        if(pass != confirmPass){
            alert("Las contraseñas no coinciden");
            pass = "";
            confirmPass = "";
        }
        
    }   
    
    
function Validaciones(){
            verificarPassword();
            confirmarAlta();
        }

<div >
              <label>Contraseña: </label>
              <input type="password"  name="txtPassword" required>
            </div>
            <div >
              <label>Repetir Contraseña: </label>
              <input type="password"   name="txtConfirmarPassword" required>
            </div>
          
          
          
          <input onclick="Validaciones()" type="submit"  value="Aceptar" name="btnAceptar">

CodePudding user response：

When you are selecting the confirm password input, you are selecting from confirmPassword instead of document.

Do this change:

// Current
confirmPassword.querySelector(".confirmPassword").value

// Change by
document.querySelector(".confirmPassword").value

CodePudding user response：

Looks like a missing semi-colon at the end of the line...

console.log(confirmPass)

Also, is the intention for the password confirmation failure to clear the input boxes for the user? Or just those local variables? You could get the object reference instead of the value in those variables, and then reset the value if that's what you want.

Nothing else is jumping out at me, but yes... definitely learn to use the dev tools built into the browser (usually you can get there by pressing the 'F12' key). You can set break points in the javascript and walk through the code execution to see where the errors are happening.