Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Jonathan Söder
Jonathan Söder
7,428 Points

need help with javascript function of onfocus and onblur

Hi!

I'm trying to clean up my html code, right now I've got 18 rows of form fields with a lot of attributes (meaning chunks of code). I'm trying to create a function of the onblur and onfocus to remove some of the things.

Right now I've got:

function onFocus() {
var elements = document.getElementsByTagName("input");

for(var i=0; i < elements.length; i++){
    if(elements[i].value == "N/A"){
        elements[i].value = "";
        }
    }
}

It... works. But if I want to take yet another step and only let the form I'm focused on clear any "N/A" string, how would I do this? I thought the onfocus attribute in the HTML would help with that but it clears all fields with the string N/A when I click any field, (and adds N/A to any empty fields with my almost identical onblur function).

I'm just happy it works, because for some reason I've had lots of trouble with this sucker for several days. Making it prettier isn't a must but I'm curious.

1 Answer

Chyno Deluxe
Chyno Deluxe
16,936 Points

Hey Johnathan, I took a look at your question and if i understood you correctly then your code should look like below. You were on the right track and ill do my best to explain what's going on. I will assume you understand what your initial code is doing and only explain my additions. If you need further details please feel free to ask.

Demo Here

Your initial Code

function onFocus() {
var elements = document.getElementsByTagName("input");

for(var i=0; i < elements.length; i++){
    if(elements[i].value == "N/A"){
        elements[i].value = "";
        }
    }
}
onFocus();

You were on the right track by cycling through each input element on the page. IN that code you added a conditional statement looking for any input element whose value equaled to "N/A". But what happend was, as soon as the elements met the condition, it would delete the value.

Here's my breakdown

First, you'd want to add onfocus and onblur events to each input element.

function onFocus() {
    var elements = document.getElementsByTagName("input");

    for(var i=0; i < elements.length; i++){

        elements[i].onfocus = function() {

        };

        elements[i].onblur = function() {

        };

    }
};
onFocus();

Then, inside your onfocus event you want to target which input has focus and check if it's value is equal to "N/A" and if so, delete it's value. in order to target which input is selected you would use the THIS keyword.

function onFocus() {
    var elements = document.getElementsByTagName("input");
    for(var i=0; i < elements.length; i++){

        elements[i].onfocus = function() {
            if(this.value === "N/A"){
                this.value = "";
            }
        };

        elements[i].onblur = function() {

        };

    }
};
onFocus();

Finally, you add the onblur conditions to check if the the input you are not longer focused on has any added input. If the input is empty. then the value is changed back to "N/A".

function onFocus() {
    var elements = document.getElementsByTagName("input");
    for(var i=0; i < elements.length; i++){

        elements[i].onfocus = function() {
            if(this.value === "N/A"){
                this.value = "";
            }
        };

        elements[i].onblur = function() {
            if(this.value === ""){
                this.value = "N/A";
            }
        };

    }
};
onFocus();

I hope this help and if you have any other questions please feel free to ask me.

Jonathan Söder
Jonathan Söder
7,428 Points

Thanks!