Jump to content

jQuery and the HTML onchange Event Attribute


iwato

Recommended Posts

<head>
<script>
  $( document ).ready(function() {
      console.log( "ready!" );
      $('#other').hide();
      function otherTongue() {
        if ($('#tongue').val() == 'other_tongue') {
          $('#other').show();
        }
      }
  });
</script>
</head>
<body>
  <form>
      <select name="tongue" id="tongue" size=4 onchange="otherTongue()" >
          <optgroup label='Oceania'>
              <option value=mi>Maori</option>
              <option value=haw>Hawaiian</option>
              <option value=sm>Samoan</option>
          </optgroup>
          <optgroup label='Not Listed'>
              <option value='other_tongue'>Other Language</option>
          </optgroup>
      </select>
      <input type='text' name='other' id='other' />
  </form>
</body>

Why do I am receiving the error message:  "Can't find variable otherTongue( )"? 

Link to comment
Share on other sites

That's because otherTongue is local to the scope of the function that runs after the document has finished loading, aside from the fact that it doesn't even exist until after the HTML has finished rendering.

Either declare the function outside of $(document).ready() or assign the event handler using Javascript.

I would discourage the use of HTML attributes for events, here's some self-contained Javascript that will work without having to download the entire jQuery library before running:

window.addEventListener("DOMContentLoaded", assignEvents);

function assignEvents() {
  document.getElementById("other").style.display = "none";
  document.getElementById("tongue").addEventListener("click", otherTongue);
}

function otherTongue(e) {
  if(e.currentTarget.value == "other_tongue") {
    document.getElementById("other").display = "";
  }
}

 

Link to comment
Share on other sites

Thank you for the code, but I am baffled by this statement:  "I would discourage the use of HTML attributes for events, ...".  It would appear to me that HTML is as close to the document that you can get, so why step away from it?  Yes, it must be true that each browser has its own way of dealing with HTML events, but surely this kind of event is so very basic that one should have little fear of variation across browsers.

Also, so long as the event is not triggered before the entire document has loaded, why can the onchange event not find it?  Is it the absence of an event handler, or is it the presence of the ready( ) function?  I asked this because the element <input id='other'> is, indeed, hidden when the document opens.

Link to comment
Share on other sites

There are three aspects to take into account in a web page:

  • Content: HTML
  • Presentation: CSS
  • Behavior: Javascript

The same way we want to separate content from presentation, we also want to separate content from behavior. Javascript should only be inside <script> elements, CSS should only be in <style> or <link> elements and HTML should not be polluted with attributes concerning behavior and presentation. You wouldn't use align and bgcolor attributes, so why would you use onclick attributes?

In your original code, otherTongue is restricted to the local scope of the function it was declared in, it's not accessible from outside. That's why the onchange event attribute can't find it, the event attribute is looking for a global function.

  • Like 1
Link to comment
Share on other sites

 

Quote

the event attribute is looking for a global function.

Got it.

There are three aspects to take into account in a web page:

Content: HTML
Presentation: CSS
Behavior: Javascript

And then, there are HTML formatted email messages.  In any case, I will try to be more assiduous.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...