I'm trying to change background color of an input field when focusing in JS, when its not in focus it should just be a white background color.

I've tried this code, but get an error on it, so I'm not sure what i'm doing wrong.

            function navn(obj, evt) {
                if (evt.type == "focus")
                    style.background = "yellow";  //<--what is style?
                else if (evt.type == "blur") {
                    style.background = "white";
                }
            }

 <form>

            <fieldset>
                <legend>Personlige oplysninger</legend>

                <div>
                    <label for="navn">Udfyld dit fornavn:</label>
                    <input type="text" name="navn" class="navn" id="navn" value="" onclick="navn()" placeholder="Dit fornavn" />*
                    <span id="obsnavn" class="alert"></span>
                </div>

                <input type="button" value="Send" id="send" />

            </fieldset>

        </form>

I'm trying to change background color of an input field when focusing in JS, when its not in focus it should just be a white background color.

I've tried this code, but get an error on it, so I'm not sure what i'm doing wrong.

            function navn(obj, evt) {
                if (evt.type == "focus")
                    style.background = "yellow";  //<--what is style?
                else if (evt.type == "blur") {
                    style.background = "white";
                }
            }

 <form>

            <fieldset>
                <legend>Personlige oplysninger</legend>

                <div>
                    <label for="navn">Udfyld dit fornavn:</label>
                    <input type="text" name="navn" class="navn" id="navn" value="" onclick="navn()" placeholder="Dit fornavn" />*
                    <span id="obsnavn" class="alert"></span>
                </div>

                <input type="button" value="Send" id="send" />

            </fieldset>

        </form>

• javascript
• html
• input
• background-color

• The 'navn' function is a parameterised function which is taking the particular object and the corresponding event action. So you have to pass those two parameters when calling that function.But since the function call is done only during a click event, there is no scope for either of the cases to execute. And as for as style is concerned, it is the elements style attribute which is responsible for rendering the css – Krishna Prashatt Commented May 18, 2018 at 13:02

2 Answers 2

There are a few issues in your code :

• your handler function declares an obj parameter as the first parameter. When an event is fired, the first element declared in the handler function is a reference to the event object.
• you're trying to react to blur or focus, but you're using onclick on your HTML tag.
• to change your element's background color, you need to modify its style object and, in this style object, the backgroundColor property (the JavaScript equivalent of the background-color CSS property).

Here's a solution involving addEventListener function. It allows you to attach the same listener to both events : blur and focus.

var element = document.getElementById("navn");
element.addEventListener("focus", handler);
element.addEventListener("blur", handler);

function handler(evt) {
    if (evt.type == "focus")
        evt.target.style.backgroundColor = "yellow"; //<--what is style?
    else if (evt.type == "blur") {
        evt.target.style.backgroundColor = "white";
    }
}

<form>
   <fieldset>
      <legend>Personlige oplysninger</legend>
      <div>
         <label for="navn">Udfyld dit fornavn:</label>
         <input type="text" name="navn" class="navn" id="navn" value="" placeholder="Dit fornavn" />*
         <span id="obsnavn" class="alert"></span>
      </div>
      <input type="button" value="Send" id="send" />
   </fieldset>
</form>

Because your function as parameter so when you call onclick="navn()" without params it can't work

call it like this :

  onblur="blur(this)"  onfocus="focus(this)"

  function blur(obj) {
                obj.style.backgroundColor == "white";
        }
  function focus(obj) {
                obj.style.backgroundColor = "yellow";
        }