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

Question

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 class="form-group">
              <label>Contraseña: </label>
              <input type="password" class="form-control password" name="txtPassword" required>
            </div>
            <div class="form-group">
              <label>Repetir Contraseña: </label>
              <input type="password" class="form-control confirmPassword"  name="txtConfirmarPassword" required>
            </div>
          
          
          
          <input onclick="Validaciones()" type="submit" class="btn btn-success" value="Aceptar" name="btnAceptar">

The error im getting is confirmPassword is not defined.

Have you tried the dev-tools in the browser to see where the script breaks? You can even put break points into the javascript with the command: "debugger;" But I'll look to see if something jumps out at me as a possible problem. — Kevin, Jul 08 '22 at 17:57
@skara9 is solved it and posted my answer, the error was that i was doing confirmPassword.querySelector instead of document.querySelector — mateo ghidini, Jul 08 '22 at 18:00

score 0 · Answer 1 · answered Jul 08 '22 at 18:00

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 class="form-group">
              <label>Contraseña: </label>
              <input type="password" class="form-control password" name="txtPassword" required>
            </div>
            <div class="form-group">
              <label>Repetir Contraseña: </label>
              <input type="password" class="form-control confirmPassword"  name="txtConfirmarPassword" required>
            </div>
          
          
          
          <input onclick="Validaciones()" type="submit" class="btn btn-success" value="Aceptar" name="btnAceptar">

score 0 · Answer 2 · answered Jul 08 '22 at 19:00

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

score -1 · Answer 3 · answered Jul 08 '22 at 18:03

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.

The missing semi-colon is not an issue. [Do we need semicolon at the end?](https://stackoverflow.com/a/4002248) — 001, Jul 08 '22 at 18:18

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

3 Answers3