Why this simple JavaScript code not working

Question

I am trying to write a code within a form input such as when the user clicks on the form element (onfocus), the value of the element disappears, but if a user click on any other input element after that (without filling up the previous input element of the form) than the value of the previous element reappears.

The HTML code is shown below:

<label id="color_text">Forename:</label><br />
<input id="f1" class="form-control" type="text" name="forename"    value="Forename" /><br /><br />

The JavaScript i am trying to run is shown below:

<script>
    var new_id = document.getElementById("f1");

    new_id.onfocus = function(){
        if (new_id.value == "Forename"){
        new_id.value = "";
        }
     };

    new_id.onblur = function() {
        if (new_id.value == ""){
        new_id.value = "Forename"; 
        }
    };

Any errors in the console? I bet there is one about `null or undefined`. And do you realize most modern browsers support placeholder? No JavaScript is needed. — epascarello, Aug 11 '15 at 13:17
where exactly are you running the script? is it after the elements are defined or before? — anurupr, Aug 11 '15 at 13:36
I am running the script at the end, I have tried writing it on a different file and included the js. file at the end, after all the elements are defined. — Rahul, Aug 11 '15 at 13:41
I am using the latest browser both Chrome and Firefox, never have and never will use IE — Rahul, Aug 11 '15 at 16:15

score 0 · Answer 1 · edited May 23 '17 at 12:06

For maximum compatibility you should use addEventListener or attachEvent (whatever is available). So for focus event something like this:

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

addEvent(new_id, 'focus', function() {
  if (new_id.value == "Forename"){
      new_id.value = "";
  }
});

You should read this about events binding. And probably use placeholder in first place, if I am right about what you are trying to accomplish.

Should make zero difference – epascarello Aug 11 '15 at 13:17 — epascarello, Aug 11 '15 at 13:17

bigneo · Answer 2 · 2015-08-11T13:26:03.140

0

Your code works just fine. http://jsfiddle.net/bigneo/7j217d8y/

I think the problem is your methods are not seen by the document. You could wrap them inside document.ready

Something like this, but requires jQuery:

$(document).ready(function() {
    // your methods here
});

edited Aug 11 '15 at 13:26

answered Aug 11 '15 at 13:19

bigneo

141
10

Brick Yang · Answer 3 · 2015-08-11T14:01:00.470

0

Your code works fine in Chrome 44. What's your browser?

And why don't you use placeholder attribute in the <input> label?

edited Aug 11 '15 at 14:01

answered Aug 11 '15 at 13:28

Brick Yang

5,388
8
34
45

I am using the latest version of Chrome and I know placeholder is an option for me, but that doesn't answer the fact why shouldn't this code work. – Rahul Aug 11 '15 at 13:31
I'm sure your code works in Chrome. Did you post all code? Because the code in your post missed the `` end label – Brick Yang Aug 11 '15 at 13:37

score 0 · Answer 4 · answered Aug 11 '15 at 13:32

Your code is fine, you just need to tell the browser when to run it. Wrap it in this:

document.addEventListener('DOMContentLoaded', function() {

    // code goes here

});

This is a much better option for vanilla JS rather than importing the whole JQuery library just to use $(document).ready(function()

Why this simple JavaScript code not working

4 Answers4