Question: The following code loops when the page loads and I can't figure out why it is doing so. Is the issue with the onfocus?

```
 alert("JS is working");

function validateFirstName() {
    alert("validateFirstName was called");
    var x = document.forms["info"]["fname"].value;
    if (x == "") {
        alert("First name must be filled out");
        //return false;
    }
}

function validateLastName()
{
    alert("validateLastName was called");
    var y = document.forms["info"]["lname"].value;
    if (y == "") {
        alert("Last name must be filled out");
        //return false;
    }
}

var fn = document.getElementById("fn");
var ln = document.getElementById("ln");

fn.onfocus = validateFirstName();
alert("in between");
ln.onfocus = validateLastName();

```

Answer: 
There were several issues with the approach you were taking to accomplish this, but the "looping" behavior you were experiencing is because you are using a combination of `alert` and `onFocus`. When you are focused on an input field and an alert is triggered, when you dismiss the alert, the browser will (by default) re-focus the element that previously had focus. So in your case, you would focus, get an alert, it would re-focus automatically, so it would re-trigger the alert, etc. Over and over. 

**A better way to do this is using the `input` event**. That way, the user will not get prompted with an error message before they even have a chance to fill out the field. They will only be prompted if they clear out a value in a field, or if you call the `validateRequiredField` function sometime later in the code (on the form submission, for example).

I also changed around your validation function so you don't have to create a validation function for every single input on your form that does the exact same thing except spit out a slightly different message. You should also abstract the functionality that defines *what* to do on each error outside of the validation function - this is for testability and reusability purposes. 

Let me know if you have any questions.

```js
function validateRequiredField(fieldLabel, value) {
    var errors = "";
    if (value === "") {
        //alert(fieldLabel + " must be filled out");
        errors += fieldLabel + " must be filled out\n";
    }
    return errors;
}

var fn = document.getElementById("fn");
var ln = document.getElementById("ln");

fn.addEventListener("input", function (event) {
    var val = event.target.value;
    var errors = validateRequiredField("First Name", val);
    if (errors !== "") {
        alert(errors);
    }
    else {
        // proceed
    }
});

ln.addEventListener("input", function (event) {
    var val = event.target.value;
    var errors = validateRequiredField("Last Name", val);
    if (errors !== "") {
        alert(errors);
    }
    else {
        // proceed
    }
});
```

```html
<form name="myForm">
  <label>First Name: <input id="fn" /></label><br/><br/>
  <label>Last Name: <input id="ln"/></label>
</form>
```
Not tested but you can try this

```
fn.addEventListener('focus', validateFirstName);
ln.addEventListener('focus', validateLastName);

```