Question

What are the pros/cons between the following two ways of passing/setting variables?

<input type="password" name="pw1" id="pw1" onkeyup="return passwordCheck(document.getElementById('pw1'), document.getElementById('pw2'))"/

function passwordCheck(first, second){...

OR

<input type="password" name="pw1" id="pw1" onkeyup="return passwordCheck()"/

function passwordCheck(){
var first = document.getElementById('pw1')
var second = document.getElementById('pw2')...

Answer 1

It makes your html markup easier to read (and your js code). It (moreso) decouples your code from your markup. An even better approach would be to bind an event listener to the input by targeting the id. That way you have NO js in your markup.

edit to respond to comment: I was referring to the 2nd example (calling a function) being better, but overall it’s better to do event binding. There are various methods to do it, here is an example:

<input type="password" name="pw1" id="pw1"/>

// ...

document.getElementByID('pw1').onkeyup = function() { 
  // do stuff
}