Unsure About What Is Going On With This JS-CodePudding

Some of my questions regarding this bit of code.

What exactly is occurring in these lines of code:

confirmPassword.oninput = function() {
  checkpassword(confirmPassword.value);
}

What is the purpose of the (f) on this line of code:

checkpassword(f)

confirmPassword.oninput = function() {
  checkpassword(confirmPassword.value);
}

function checkpassword(f) {
  if (password.value !== f) {
    addWarning();
  }
  if (password.value === f) {
    confirmPasswordError.textContent = '';
  }
}

CodePudding user response：

This code is not following very good coding practices, since it's using impure functions, and variables naming is not quite self-explainatory.

This should be better:

confirmPassword.oninput = function() {
  checkpassword(password.value, this.value);
}

function checkpassword(pwd, confirmPwd) {
  if (pwd !== confirmPwd) addWarning();
  else confirmPasswordError.textContent = '';
}

This should be your full script:

const password = document.getElementById("password");
const confirmPassword = document.getElementById("confirm-password");

// Assuming your HTML code has:
// <input id="password" type="password" />
// <input id="confirm-password" type="password" />

// HTMLElement.onevent = function 
// is equivalent to :
// HTMLElement.addEventListener(event, function)
// in this case you are assigning a function to be executed when your 
// passwordConfirm element receives new inputs
// ( key strokes on input focus )

// At each key stroke the anonymus function you assigned to .oninput 
// is being called, checkPassword function is being called
// with two parameters, the first one is the value of the first input
// box, the original password string value, the second parameter is the 
// value of confirmPassword input box.
// Those two walues are being compared to be sure that both original and 
// confirmation passwords are the same.


confirmPassword.oninput = function() {
  checkpassword(password.value, this.value);
}

function checkpassword(pwd, confirmPwd) {
  if (pwd !== confirmPwd) addWarning();
  else confirmPasswordError.textContent = '';
}

CodePudding user response：

The first block of code is used to attach a function to the "oninput" event listener of the <input> element that you have stored in the confirmPassword element. (You can read more about the "oninput" event right here)

So, when the input/content of the <input> element changes, the function that you attached will be called - and that function, in turn, calls the checkpassword function. And the value/content of this element is passed to the checkpassword function.

confirmPassword.oninput = function() {
              // You are attaching a function to an event listener!
              //
              // The "oninput" event is fired when your <input>
              // element's (the one stored in the "confirmPassword"
              // variable) value changes.
              //

        checkpassword(confirmPassword.value);
                   // ^^^ Pass the value of the input element
                   //     to the first variable/argument of the
                   //     function "checkpassword"
    }

As for what the f means within the second block of code, it's used to store the value that you passed to the function in the first block of code.

function checkpassword(f) {
                    // ^ The first function argument/variable
                    //   (It holds the value of your input
                    //   field in this case)

         ...

    }

Side note: It seems that you are quite new to JS. Try to use some free websites to get a better understanding of this language. (I'd recommend using sololearn, or w3schools)

CodePudding user response：

f is a parameter, you can replace it and all occurrences in that function with password and it will still do the same thing. It is checking the inputted text for the things. If there was no parameter, then they couldn't make this code or check the text because they would have to make trillions of functions for every character combination possible.

You can call that function using f by using checkpassword("example");, then f would equal example.

The first event executes the checkPassword function with its value when the form input gets typed in.

More information about parameters:

https://developer.mozilla.org/en-US/docs/Glossary/Parameter https://www.w3schools.com/js/js_function_parameters.asp

More information about oninput:

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput https://www.w3schools.com/jsref/event_oninput.asp