iwato Posted March 26, 2017 Share Posted March 26, 2017 <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 More sharing options...
Ingolme Posted March 26, 2017 Share Posted March 26, 2017 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 More sharing options...
iwato Posted March 26, 2017 Author Share Posted March 26, 2017 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 More sharing options...
Ingolme Posted March 27, 2017 Share Posted March 27, 2017 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. 1 Link to comment Share on other sites More sharing options...
iwato Posted March 27, 2017 Author Share Posted March 27, 2017 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now