onblur function not working for me- might be my coding

Question

I can't seem to figure out why onblur isn't working for my online class assignment. I understand there's an issue with the onblur function when using Chrome, but I tried Firefox and that didn't work either. My classmates had success using onclick="this.focus()" but that didn't work for me either. I copied the script exactly like the instructor did in the video except using my own variables and no luck!

function checkzip() {
  var zip = document.getElementById("zipcode").value;
  var regex = /^[0-9]{5}$/;

  if (regex.test(zip)) {
    document.getElementById("zipmessage").innerHTML = "Valid";
  } else {
    document.getElementById("zipmessage").innerHTML = "Please enter a 5 digit numeric zip code";
  }
}

<tr>
  <td>Zip Code:</td>
  <td><input id="zipcode" name="zipcode" type="text" onclick="this.focus()" onblur="checkzip();" required/></td>
</tr>

Your code is working fine for me. May be you forgot to add element with zipmessage class — Karan Singh, Jun 20 '20 at 22:20

score 1 · Answer 1 · answered Jun 20 '20 at 22:22

1

Your code seems to be fine - i suspect your missing the zipmessage element.

function checkzip() {
    var zip = document.getElementById("zipcode").value;
    var regex = /^[0-9]{5}$/;
    
    if(regex.test(zip)) {
        document.getElementById("zipmessage").innerHTML = "Valid";
        }
    else {
        document.getElementById("zipmessage").innerHTML = "Please enter a 5 digit numeric zip code";
        }
}

    <div id="zipmessage"></div> 
    
    <input id="zipcode" name="zipcode" type="text" onclick="this.focus()" onblur="checkzip();" required/>

answered Jun 20 '20 at 22:22

jagmitg

4,236
7
25
59

Checked in my Google Chrome Version 83.0.4103.106 (Official Build) (64-bit), works fine! – Yaro Jun 20 '20 at 22:31
That's so weird! I tried both Chrome and Firefox and neither worked for me. Another classmate got it to work in Firefox. – rexbex Jun 22 '20 at 13:04
Since you've added `div id="zipmessage"` and the OP didn't have that, it's hard to say that the OP''s code seems fine. You had to add more code to get it to work. – Scott Marcus Jun 22 '20 at 16:45

Scott Marcus · Accepted Answer · 2020-06-20T22:45:49.247

You have the following:

document.getElementById("zipmessage")

But you don't have such an element. If you add that element, it works.

function checkzip() {
  var zip = document.getElementById("zipcode").value;
  var regex = /^[0-9]{5}$/;

  if (regex.test(zip)) {
    document.getElementById("zipmessage").innerHTML = "Valid";
  } else {
    document.getElementById("zipmessage").innerHTML = "Please enter a 5 digit numeric zip code";
  }
}

<table>
  <tr>
    <td>Zip Code:</td>
    <td>
      <input id="zipcode" name="zipcode" type="text" onclick="this.focus()" onblur="checkzip();" required/>
    </td>
  </tr>
</table>
<div id="zipmessage"></div>

But, as you have said that you are learning this from an "instructor", let me tell you that you are not learning using modern, best-practices and some of what you are doing should be avoided.

Don't set up your event handlers with HTML attributes. Set them up in JavaScript with .addEventListener().
You didn't show it, so maybe you have it, but tr elements must be children of a table element.
Don't use .innerHTML when the string you are working with doesn't contain any HTML to be parsed. There are performance and security implications to it. Instead, use .textContent.
Don't use self-terminating XHTML syntax unless you need XML valid code.

So, here's the more correct way to do this:

// Just get a reference to the element, not a particular
// property of an element. That way, if you want to access
// a second property, you won't have to scan for the element
// reference a second time.

// Also, get references that you'll need over and over outside of your
// function so you don't keep getting the same reference over and over
// Do you event binding in JavaScript, not HTML:
var zip = document.getElementById("zipcode");
zip.addEventListener("blur", checkzip);

var message = document.getElementById("zipmessage");

function checkzip() {
  // Having this.focus() in an event handler that runs when you click
  // on an element is redundant. If you've clicked the element, it 
  // will get the focus.
  
  var regex = /^[0-9]{5}$/;
  if (regex.test(zip.value)) {
    message.textContent = "Valid";
  } else {
    message.textContent = "Please enter a 5 digit numeric zip code";
  }
}

<table>
  <tr>
    <td>Zip Code:</td>
    <td>
      <!-- Don't use self-terminating syntax. 
           Also type="text" is not necessary since text is the
           default type of input. -->
      <input id="zipcode" name="zipcode" required>
    </td>
  </tr>
</table>
<div id="zipmessage"></div>

Unfortunately, there are so many tutorials, lessons, and teachers that don't really know HTML and JavaScript properly and show how to get code to "work". Working code is not always "correct" code or "good" code. You should inform your instructor of the incorrect things they are teaching that I've shown here.

I truly appreciate the feedback! Thank you very much! I'll give these suggestions a try tonight and see how it goes. — rexbex, Jun 22 '20 at 13:03
@rexbex You're welcome. Don't forget to up vote and consider marking this as "the" answer. — Scott Marcus, Jun 22 '20 at 16:43

onblur function not working for me- might be my coding

2 Answers2