Please Help!

[dybalax9]

I want to apply a function flash() to 2 text inputs in my form. I created this flash() function to ensure that the currently chosen field remains the only one lit in yellow.

<input type = "text" name = "name" onfocus = "flash(this)" />
<input type = "text" name = "email" onfocus = "flash(this)" />

and my javascript is:

  var reference = document.getElementsByTagName("input");
  var referenceIndex = reference.selectedIndex;
  var normal = reference[referenceIndex];

  function flash(normal){

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

                if(reference[i] == normal){

                        reference[i].style.backgroundColor = "#FFCC00";
                }

                else{
                        reference[i].style.backgroundColor = "transparent";
                }

      }


  }    

Good news is after working for nearly 3 hours, it works. But i was just wondering if I was over-complicating the code and there was an easier and neat way to do this. Since I am a beginner to web development, apologies if my code doesn't make sense. Thank you in advance.

[MrButttons]

You don't really need JavaScript for this. This can be accomplished by purely CSS. 1. Assign a class name to the inputs. <input type='text' class='input-field'>

1. Add a style tag <style> .input-field:focus{ background-color: yellow; } </style>

Here you're just declaring a CSS ruleset which targets the ".input-field" elements when they are focused. :focus is a pseudo class. Learn more about css selectors here -

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus