Jump to content
Sign in to follow this  
iwato

jQuery and the HTML onchange Event Attribute

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( )"? 

Share this post


Link to post
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 = "";
  }
}

 

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...